Repository navigation
How to best highlight target container when dragging over it? #1468
Description
Question:
Evaluating Sortable.js (more specifically: Vue.Draggable) for use in our project, I'm having a hard time to find what the best way is to simply highlight the target container when an item is dragged over it. I would have hoped there to be events that I could catch (dragenter/dragleave/dragover) so that I could manage the highlighting / unhighlighting by adding/removing classes (or whatever I'd like to do), but there does not seem to be a hook for that. Or am I grossly overlooking things?
Activity
owen-m1 commentedon Mar 12, 2019
There are no events for this in Sortable, but you can use the same events that Sortable uses.
I answered a question similar to this on stackoverflow: https://stackoverflow.com/questions/54917268/ondragover-equivalent-in-vue-draggable-sortable-js/54960057#54960057
plindelauf commentedon Mar 12, 2019
Ah yes! That looks cool. One more question, though: the sample code does not seem to work on touch devices (tried it on iOS). Is there any specific way to cover that scenario?
owen-m1 commentedon Mar 12, 2019
@plindelauf There seems to be no "touchenter" event in JavaScript, so you will have to improvise. Here is something I found on the issue: https://stackoverflow.com/questions/23111671/touchenter-and-touchleave-events-support
plindelauf commentedon Mar 13, 2019
Great, Owen! I got it to work that way. I took the liberty of expanding your example on StackOverflow with this support for touch.
lk77 commentedon May 20, 2021
Hello,
i found a solution :
it seems to work fine