How to best highlight target container when dragging over it?

[plindelauf]

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?

[owen-m1]

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]

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]

@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]

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]

Hello,

i found a solution :

<draggable @dragenter.native="console.log('dragenter')"/>

it seems to work fine