Question - Sortable and Snappable

[robertrachita]

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.

• Library version: 1.1.3
• Browsers: all
• Tech stack: TypeScript v5.4.