Sortable plugin - more than two connected lists


Topic: Sortable plugin - more than two connected lists

brightsystems priority asked 1 year 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.


zoey daisy free answered 1 year ago

Hi, Dawid

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


Nomi86 free answered 1 year ago

Thanks, for sharing this.


Dawid Wajszczuk staff answered 1 year 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 1 year ago

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


Dawid Wajszczuk staff answered 1 year 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 1 year 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
  • User: 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