Fix duplicated instances when dragging sortable with sortable childs

[james-em]

Code pen demonstrating the bug is fixed: https://codepen.io/James-St-Pierre/pen/ZEZZqew

Closes
#16 (Lots of good information here)
#8
stimulus-components/stimulus-components#60

Explanation:

When you have a draggable list that have children with draggable list, it means both the parent and child have data-controller="sortable"

What happens when you drag around the parent list item, SortableJS moves the item using appendChild or insertBefore or other means that do not disconnect any connected event handlers. However, this seems to trigger Stimulus connect/disconnect callback on the child as they are dragged on so this library destroy and re-instantiate a new sortable instance everytime while this is unnecessary. Calling .destroy() on the child sortable while dragging the parent seems to stop the dragging process and that is what users are reporting

Drawbacks

If really an element was actually removed while dragging an item, we wouldn't destroy the SortableJS instance.

It reallty

We could lower the risk by checking if the disconnected item is actually a child of the dragged item (Sortable.dragged) however that wouldn't actually mean with 100% certainty the element is being removed.

Another thing that could be done is maintaining a map of all elements and have a setInterval(...) or something that checks every x seconds if elements are still present in the DOM and after a few consecutive ticks destroy the instance. Not sure what happens if this happen while dragging a non-related item.

A third solution could be listening to turbo:load to get rid of all previous instances.

[james-em]

@guillaumebriday Any chance you can have a quick look? :)

[MiltonRen]

I found that disconnecting throws errors when I'm on mobile. This would fix the errors in my environment:

    if (!Sortable.active && typeof(this.sortable) != "undefined") {
      this.sortable.destroy()
    }
    this.sortable = undefined