如何链接到SortableJS的拖动事件

Question

我正在尝试从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>

(这里的评论只是为了清楚起见)

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