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 .


mikejela free answered 1 year ago


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!


mikejela free answered 1 year ago


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.


    zoey daisy free answered 3 years ago


    Hi, Dawid

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


    Nomi86 free answered 3 years ago


    Thanks, for sharing this.


    Dawid Wajszczuk staff answered 3 years ago


    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


    brightsystems priority answered 3 years ago


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


    Dawid Wajszczuk staff answered 3 years ago


    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" });



    Please insert min. 20 characters.

    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