How to hook into the drag event of SortableJS

Question

I'm trying to hook into the dragover/touchmove event from the SortableJS library (1.8.4). The elements are dragging and swapping just fine, but listening to those events do not trigger the callback function I provided them.

The use case is that if the draggable is outside of the swapThreshold, but over the target, it should be able to be dropped on the target without swapping places with it. Once the draggable reaches the swapThreshold, it should then swap places as usual.

<draggable
    v-model="itemsArray"
<!-- invert-swap="true"      - this helps, but the elements don't swap until the 
                               draggable is almost off of the target completely -->
<!-- swap-threshold="0.5"    - changing this didn't help -->
<!-- dragover-bubble="true   - seems to have no effect -->
    @dragover="log"       <!-- log() is not being called -->
    @touchmove="log"      <!-- log() is not being called -->
    :move="log"           <!-- log() IS called for :move, and @start, @end, etc. -->
>
  <li v-for="item in itemsArray">{{item}}</li>
</draggable>

(the comments are just here for clarity)

I considered a solution in the move event but that is only called after a swap takes place, or unreliably as stated in my comment above about the invert-swap property

Note: I'm using Vue.Draggable (2.20), but this should also apply if using SortableJS directly

Answer 1

Use @dragover="log" @touchmove="log" in your li - not in draggable component.

Something like this:

<li @dragover="log" @touchmove="log" v-for="item in itemsArray">{{item}}</li>