search

Shopify / draggable

The JavaScript Drag & Drop library your grandparents warned you about.
https://shopify.github.io/draggable
MIT License
17.93k stars 1.09k forks source link

Question - Sortable and Snappable #606

Open robertrachita opened 5 months ago

robertrachita commented 5 months ago

I'd like to have two containers, one being a Sortable, and the other one being a grid Snappable(swappable). What I'm trying to achieve is having elements from the Sortable container dragged onto the Snappable grid.

If I declare them separately like this:

`const sortable = new Sortable(document.querySelectorAll('.draggable-container'), { draggable: '.draggable-element', });

    const swappable = new Swappable(document.querySelectorAll('.grid-container'), {
        draggable: '.grid-cell',
        plugins: [Plugins.Snappable],
    });`

i am not able to drag any elements between the two.

The only method I've managed to get something like this to work is by having two sortables declared at the same time, like in the Multiple containers example, but this is not what I want as I'd like to preferably keep the snappable/swapping features, and I also want to basically duplicate/create a new copy on the element from the Sortable container onto the Swappable element.

Is this even possible? If so, any examples of how I can achieve this would be welcomed.