Possible to combine sortables?
See original GitHub issueI’m trying to use dnd-kit on a board where cards can be reordered and combined, similar to this example from react-beautiful-dnd
.
Is this possible to do using the current @dnd-kit/sortable
package? I can probably do it with @dnd-kit/core
but I assume I’d miss out on things like keyboard sorting and sorting strategies.
Any thoughts/guidance would be much appreciated!
This library is awesome by the way 😁
Issue Analytics
- State:
- Created 3 years ago
- Reactions:4
- Comments:12 (1 by maintainers)
Top Results From Across the Web
Combining jQuery draggable, droppable, and sortable
I'm trying to combine jQuery draggable, droppable, and sortable; however, I keep having problems. Can anybody help me? Basically, the idea is illustrated ......
Read more >combine selectable and sortable
is it possible to combine the selectable with the sortable ui? i dont think so but maybe someone has discovered this already
Read more >Sortable Widget | jQuery UI API Documentation
If defined, the items can be dragged only horizontally or vertically. Possible values: "x" , "y" . Code examples: Initialize the sortable with...
Read more >jQuery Sortable
Why another sortable plugin? you might ask. Aren't there many others? The answer is: nested lists. None of the other solutions had a...
Read more >Make one Sortable to connectWith multiple ...
Please advise, If this approach is possible and supported in Kendo UI Sortable. If yes, please kindly provide a working example. Thank you....
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
This should be possible yes, you’ll need to put in a bit of work though.
Say you were building a vertical list, I’d start by forking the
verticalListSortingStrategy
and updating the threshold after which a node should shift positions.You’d also need to update the
onDragEnd
handler to either combine the items if dropped within the given threshold or reorder thee items.If you want to support keyboard input, you would also need to fork the keyboard coordinates getter to first move into the threshold that doesn’t cause the node to shift position on the first keydown event, and then outside of that threshold on the second keydown event.
I’ve been looking for workarounds and found a pattern that’s a bit weird in terms of user experience, but I’ve decided to give it a go nonetheless—sharing a rough sketch of how it might look like in case somebody finds it useful (my use-case is an extension of the
pointerWithin
). You basically divide each item in a vertical list in half; the left side always sorts, and the right side always combines:https://user-images.githubusercontent.com/6409354/165963684-2cbeadbe-e49c-4fe0-9d18-1aa199e915bc.mp4