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>

如何挂钩到SortableJS的拖动事件

1 个答案: