Nested list (tree) - how to nest elements by dragging to the right?

Question

What would be the approach with Vue.Draggable/SortableJS in order to achieve the functionality as shown in this animated gif?

The default behavior of Sortable for nesting is to drag the element up to the above element until the mouse reaches emptyInsertThreshold pixels from the drop zone of the above element but I would like to be able to nest elements by dragging them to the right. Same for un-nesting.

I have set emptyInsertThreshold to 0 to disable the default behavior and now when I drag the element to the right I get the following events fired: clone and start (in that order).

But how do I:

1. Can get notified when the mouse has traveled the pre-defined distance to the right?
2. Inform Vue.Draggable that the ghost element should be nested as a child to the element under which I am doing the horizontal movement?

Answer 1

You can get the mouse position given in the start event under event.originalEvent and in the onMove event using the originalEvent argument (2nd argument). I would track the % that the mouse is past the end of the list item above the dragged item, using: (clientX - aboveItemStart) / aboveItemWidth. Then when it reaches 10% or so, change the DOM directly using event.dragged. Not sure how you would modify it to work with Vue.Draggable... you might need to edit the Vue.Draggable source.