1

我正在尝试从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，这也应该适用

4

1 回答 1

2

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

像这样的东西：

<li @dragover="log" @touchmove="log" v-for="item in itemsArray">{{item}}</li>
于 2019-04-03T04:36:55.367 回答