Sortable plugin - more than two connected lists - Material Design for Bootstrap

Topic: Sortable plugin - more than two connected lists

brightsystems priority asked 3 years ago

Is there a way to connect more than two sortable lists? I have tried using a class selector instead of id selector (data-mdb-connected-list=".sortable-list"), but it only selects the first element in the collection. I would really appreciate this option as I am rebuilding a project and want to get rid of a bunch of jquery-ui.

Thanks.

Fatag free commented 1 year ago

Group 1 Item 1.1 Item 1.2

Group 2 Item 2.1 Item 2.2 Group 3 Item 3.1 Item 3.2 .

Add comment

mikejela free answered 1 year ago

0 0 Best answer

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!

Add comment

mikejela free answered 1 year ago

0 0 Best answer

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<a href="https://namecombinertool.com/" target="_blank" rel="nofollow">.</a>

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.

Please insert min. 20 characters.

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

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

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.

Add comment

zoey daisy free answered 2 years ago

0 0 Best answer

Hi, Dawid

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

Add comment

Nomi86 free answered 3 years ago

0 0 Best answer

Thanks, for sharing this.

Add comment

Dawid Wajszczuk staff answered 3 years ago

0 0 Best answer

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

Add comment

brightsystems priority answered 3 years ago

1 0 Best answer

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

Add comment

Dawid Wajszczuk staff answered 3 years ago

0 0 Best answer

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

brightsystems priority commented 3 years ago

I am working in MDB5, and there seems to be some differences.

"connectWith" is now "connectedList", and even with only two lists, it does not work with css classes, as the selector points to the first list only.

That is: With two sortable lists with the class ".sortable-list", the code below makes it possible to move elements from the second list to the first, but not the other way around.

$(".sortable-list").sortable({ connectedList: ".sortable-list" });

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Priority
Premium support: Yes
Technology: MDB Standard
MDB Version: 3.2.0
Device: Any
Browser: Any
OS: Any
Provided sample code: No
Provided link: No

brightsystems

39Support score
5Questions 1Answers 1Snippets