sortablejs - 嵌套列表（树） - 如何通过向右拖动来嵌套元素？

Question

为了实现这个动画 gif中所示的功能，Vue.Draggable/SortableJS 的方法是什么？

用于嵌套的 Sortable 的默认行为是将元素向上拖动到上面的元素，直到鼠标到达上面元素emptyInsertThreshold的放置区域的像素，但我希望能够通过将元素拖动到右侧来嵌套元素。取消嵌套也是如此。

我已设置emptyInsertThreshold为0禁用默认行为，现在当我将元素向右拖动时，我会触发以下事件：clone和start（按此顺序）。

但是我该怎么做：

1. 当鼠标向右移动了预定义的距离时可以得到通知吗？
2. 通知 Vue.Draggable 幽灵元素应该作为子元素嵌套到我在其下进行水平移动的元素？

Answer 1

您可以使用参数（第二个参数）在 start 事件event.originalEvent中和 onMove 事件中获取鼠标位置。originalEvent我将跟踪鼠标超过拖动项目上方列表项末尾的百分比，使用：(clientX - aboveItemStart) / aboveItemWidth。然后当达到 10% 左右时，直接使用event.dragged. 不确定如何修改它以使用 Vue.Draggable ...您可能需要编辑 Vue.Draggable 源。