Sortable plugin - more than two connected lists

I tried to make a snippet showing the issue here: https://mdbootstrap.com/snippets/standard/brightsystems/3021137/

Hi,

I believe that using this jQuery code should help

$(".class").sortable({
     connectWith: ".class"
});

More useful examples can be found in our documentation: https://mdbootstrap.com/docs/b4/jquery/plugins/sortable/#docsTabsOverview

Keep coding,
Dawid

Hi,

Currently in MDB5 we don't have the option to connected more than 2 lists in sortable plugin. But I will add this to our ideas list and maybe in the future we will add this option.

Keep coding.
Dawid

Thanks, for sharing this.

Hi, Dawid

Thanks for adding into your ideas list. it will help us in future

To achieve this, you can use the connected option of the Sortable library. This option takes an array of Sortable elements to connect.

Here's an example of how to connect three sortable lists using the Sortable library:

html Copy code

To connect these three sortable lists, you can use the following JavaScript code:

javascript Copy code var sortable1 = document.getElementById('sortable1'); var sortable2 = document.getElementById('sortable2'); var sortable3 = document.getElementById('sortable3');

new Sortable(sortable1, { group: "shared", connected: [sortable1, sortable2, sortable3] });

new Sortable(sortable2, { group: "shared", connected: [sortable1, sortable2, sortable3] });

new Sortable(sortable3, { group: "shared", connected: [sortable1, sortable2, sortable3] }); In this example, we create three instances of the Sortable library, one for each sortable list, and set the connected option to an array containing all three sortable lists. This tells the Sortable library that these three lists are connected and items can be moved between them.

Note that we also set the group option to "shared" to make sure that only items from the same group can be moved between the lists.

I hope this helps! Let me know if you have any further questions.

Hi there! Have you tried using the data-mdb-connected-lists attribute instead of data-mdb-connected-list? This attribute allows you to specify multiple lists by separating them with a comma. For example, data-mdb-connected-lists=".sortable-list-1, .sortable-list-2, .sortable-list-3". Hope this helps!