如何挂钩SortableJS的拖动事件

Question

我正试图从SortableJS库（1.8.4）挂钩dragover / touchmove事件。元素拖动和交换就好了，但是听这些事件不会触发我提供的回调函数。

用例是如果draggable在swapThreshold之外，但是在目标之上，它应该能够被丢弃在目标上而不用它交换位置。一旦可拖动到达swapThreshold，它应该像往常一样交换位置。

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

（这些评论只是为了清晰起见）

我在move事件中考虑了一个解决方案，但这只是在交换发生后调用，或者在我上面关于invert-swap属性的评论中所说的不可靠

注意：我正在使用Vue.Draggable（2.20），但如果直接使用SortableJS，这也适用

Answer 1

在你的li中使用@ dragover =“log”@ touchmove =“log” - 不在可拖动组件中。

像这样的东西：

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