New Feature Request: Multiselect of draggable items

[illudens]

It would be a powerful feature to add the ability to select multiple items and drag and drop them together. This may be feasible using the jquery ui selectable tool as this post does:

http://www.stupidannoyingproblems.com/2012/06/using-jquery-ui-draggable-with-selectable-with-ctrlshift-selections/

[illudens]

Update: actually upon further investigation the simplest path to multiselect support would be to clean up and leverage the https://github.com/shvetsgroup/jquery.multisortable wrapper around jquery ui sortable and drop it where jquery.sortable is currently called.

[d0minicw0ng]

@illudens I am looking at the same problem as well, do you mind telling me how you did it?

[chrisknoll]

I also am looking for this functionality. Does anyone has something that behaves like knockout-sortable but allows multi-select of the list items?

[bzamfir]

While looking for this feature I found the following example: http://embed.plnkr.co/4tlw6D/

I'll give it a try, and I hope it will help others was well

[jords1987]

@bzamfir did you get that to work? I been trying to get it working but seen a few issues... Or did anyone get a clean implementation of this functionality?

[bzamfir]

Hi, Sorry for late reply. Actually, yes, I got the working, but after a lot of debugging and tweaking.

My case was quite complex, because I had the following scenario:

• two trees, (they both were implemented as list with children as lists)
• I should drag only leaves, not tree nodes
• leaves could be drag from first tree to second one, from second to first and between branches of second, but not between branches of first.
• first three had different type of nodes, that could be drag to second onto the same branch, But when dragging back (from right to left) if multiple nodes were of different types, they should end up under appropriate branch only
• and last but not the least, I should be able to drag both with sortable lists visible, but also with them hidden (that is, the root branch "collapsed", so the drag was over the branch which in that moment expanded and the nodes were added to its child list of leaves.

Few advice:

• I added attributes to all my nodes (both leaves and branches) through attr: { id } binding, and I used those attributes in multiSortableOptions.helper to identify the parent to drag from (that is, db in code example above
• in selectProcedure since I had to multi-select only from a single branch at a time I added code to forcibly deselect everything if after a select / multi-select user clicks to nodes from another branch
• I added droppable binding to all branches (root nodes where users could drag to with children (leaves) collapsed)
• I created two droppable binding handlers - Add - called when dragging to right tree and Remove when dragging to left tree - and they did the most of logic (most of it app-specific - decide when nodes are allowed to be dragged or not). They identified the parent to drag to and after various processing called moveTheseTo that actually moved objects from one list to the other
• onAfterMove - no code at all
• onBeforeMove - decide what to move (directly through moveTheseTo or to call Add or Remove handlers mentioned above), performed the move and then simply canceled the actual drag (but actually it did happened because of call to moveTheseTo

My logic above was needed because objects in left and right tree were different - it was core object, further decorated as needed for left / right trees.

I'm not sure if all details above make sense, but I hope they'll give you some useful direction.

I plan to write an article detailing the whole case, but I'm not sure when I might have enough time for it. When (if) I'll do it, I'll post update here

Greetings