如何挂钩到 SortableJS 的拖动事件答案

【问题标题】：How to hook into the drag event of SortableJS如何挂钩到 SortableJS 的拖动事件
【发布时间】：2019-08-24 11:51:36
【问题描述】：

我正在尝试从 SortableJS 库 (1.8.4) 中连接到 dragover/touchmove 事件。元素可以很好地拖动和交换，但监听这些事件不会触发我提供的回调函数。

用例是，如果可拖动对象在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>

（为了清楚起见，这里的 cmets）

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

注意：我使用的是 Vue.Draggable (2.20)，但如果直接使用 SortableJS，这也应该适用

【问题讨论】：

标签： javascript sortablejs vue.draggable vuedraggable

【解决方案1】：

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

类似这样的：

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

【讨论】：

我还没有尝试过，但有没有办法让它在可拖动的父级上工作？在我切换到拖放库之前，我在父级上有 touchmove 事件，它运行良好。只是想知道它是否被 SortableJS 或其他东西阻止了..
draggable 是一个 vue 组件，渲染后转换为 div。我认为他们没有公开任何事件来处理父可拖动中的 touchmove。