draggable: [BUG] Incorrect oldIndex when there are nested draggable containers

I’m using the library to build a layout creator.

There is a main Sortable container which contains draggable items. Some of these draggable items can themselves contain a nested Sortable container.

When I drag an item from the main Sortable container and drop it into a nested Sortable container, I’m getting an incorrect value for oldIndex. This happens only if I’m dragging an item which is located after the nested Sortable container in the DOM.

______________________________________________________________________________________________
| Main Sortable                                                                               |
|     ___________________________________________________________________________________     |
|    | Draggable item A (direct child to main Sortable)                                  |    |
|    |     _________________________________________________________________________     |    |
|    |    | Nested Sortable                                                         |    |    |
|    |    |    ________________________________________________________________     |    |    |
|    |    |    | Nested Draggable item B                                       |    |    |    |
|    |    |    |_______________________________________________________________|    |    |    |
|    |    |_________________________________________________________________________|    |    |
|    |___________________________________________________________________________________|    |
|                                                                                             |
|     ___________________________________________________________________________________     |
|    | Draggable item C (direct child to main Sortable)                                  |    |
|    |___________________________________________________________________________________|    |
|_____________________________________________________________________________________________|

When I drag Draggable item C into Nested Sortable just next to Nested Draggable item B, the value of oldIndex for Draggable item C is 2, instead of 1.

I’m expecting 1 because inside Main Sortable, Draggable item C is the second child and should have 1 as its index.

I found the issue at this line in Draggable.js

getDraggableElementsForContainer(container) {
>   const allDraggableElements = container.querySelectorAll(this.options.draggable);

    return [...allDraggableElements].filter((childElement) => {
        return childElement !== this.originalSource && childElement !== this.mirror;
    });
}

We are querying ALL draggable items inside the container of Draggable item C, which includes the nested draggable items too. This makes the oldIndex for Draggable item C much higher than expected.

A quick fix could be to update the getDraggableElementsForContainer() function to this:

getDraggableElementsForContainer(container)  {
    const allDraggableElements = container.querySelectorAll(this.options.draggable);
    
    return [...allDraggableElements].filter((childElement) => {
    >   return childElement !== this.originalSource && childElement !== this.mirror && childElement.parentNode === container;
    });
}

I’m returning only the direct children of the parent by using childElement.parentNode === container.

Please let me know if it makes sense to file a pull request including this fix. I’d love to contribute, even though it’s a tiny contribution 😃