Possible to combine sortables?

I’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 😁

[clauderic]

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.

[awgv]

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