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

Question

使用Vue.Draggable / SortableJS来实现this animated gif中所示功能的方法是什么？

Sortable用于嵌套的默认行为是将元素拖动到上方元素，直到鼠标从上方元素的放置区到达emptyInsertThreshold像素为止，但是我希望能够通过拖动来嵌套元素他们在右边。取消嵌套也一样。

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

但是我该怎么办

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

Answer 1

您可以使用event.originalEvent参数（第二个参数）在originalEvent下的start事件和onMove事件中获得鼠标位置。我将使用(clientX - aboveItemStart) / aboveItemWidth跟踪鼠标经过拖动项上方列表项末尾的百分比。然后，当达到10％左右时，直接使用event.dragged更改DOM。不知道如何修改才能与Vue.Draggable一起使用...您可能需要编辑Vue.Draggable源。