Make one Sortable to connectWith multiple Sortable

[Nariman]

Hi,

I've 4 sortable and want to connect all together such a way that elements from any of the sortable can be drag & dropped to any of the other 3 Sortables.
With JQuery UI Sortable this approach can be done (pls refer to this example: http://jsbin.com/aMIxUHi/1/edit).

However in Kendo UI Sortable when I try the following, it doesn't work:
                    $("#rightbar").kendoSortable({
                        filter: ">div",
                        cursor: "move",
                        connectWith: ["#leftbar", "#centrebar"],
                        placeholder: placeholder,
                        hint: hint
                    });
                    $("#leftbar").kendoSortable({
                        filter: ">div",
                        cursor: "move",
                        connectWith: ["#rightbar", "#centrebar"],
                        placeholder: placeholder,
                        hint: hint
                    });
                    $("#centrebar").kendoSortable({
                        filter: ">div",
                        cursor: "move",
                        connectWith: ["#leftbar", "#rightbar"],
                        placeholder: placeholder,
                        hint: hint
                    });
Please advise, If this approach is possible and supported in Kendo UI Sortable. If yes, please kindly provide a working example.
Thank you.  

[Alexander Valchev]

Hi Nariman,

The scenario is supported just there is a difference in the syntax. In Kendo Sortable the connectWith option accepts a string (jQuery selector) not an array of selectors. That said you should change connectWith: ["#leftbar", "#centrebar"] to connectWith: "#leftbar, #centrebar".

Regards,
Alexander Valchev
Telerik

 

 

[Nariman]

Thank you Alex, it works!
1. May I know if there is any max limit for number of elements we can put in connectWith string?
e.g: connectWith: "#a1, #a2, #a3, #a4, ............."

2. Also if we connectWith more elements does it affect the performance of Browser and/or SortedLists and/or Drag&Drop operations?

Thank you.

[Alexander Valchev]

Hi Nariman,

Regarding your questions:

1. May I know if there is any max limit for number of elements we can put in connectWith string?
There is no limitation of the elements that you can list as connected lists.

2. Also if we connectWith more elements does it affect the performance of Browser and/or SortedLists and/or Drag&Drop operations?
While the user drags Sortable widget constantly checks what is the drop target element - if the dragged element is not positioned over its own container than the widget starts checking all possible connected targets. That said the widget loops through all connected instances until it finds where the drop placeholder should be positioned. Having large amount of connectedLists will require looping through a larger collection which might cause performance issues in case the amount is really large.

Regards,
Alexander Valchev
Telerik

 

 

[Nariman]

Very well, thank you Alex!

[Scott]

Another option if you're worried about looping through lots of selectors is to use a CSS class instead.

$(".sortableList").kendoSortable({ connectWith: ".sortableList"});

 

Now anything with the sortableList class will be sortable and connected.