Is it possible to swap elements between two lists on a drop?

[SamStonehouse]

I'm looking to create a drag and drop style interaction where elements are dragged to other elements which then swaps them. The layout could be achieved by two lists of two elements each, with each list always containing two elements; but I can't see anywhere which suggests this would or wouldn't be supported.

Do you think this is achievable with react-beautiful-dnd?

And apologies for using your issues for this kind of question, I didn't see a link to an alternative discussion board for casual questions.

[alexreardon]

I struggling to understand what you are trying to achieve. Could you please provide some more information / diagrams?

[SamStonehouse]

I simply want to drag a list item on another list item and have them swap positions instead of the item just being dropped in place. I could do diagrams if more information is needed, but I'm just looking to swap items instead of insert.

[alexreardon]

You can do what you like in your onDragEnd function. So you could achieve a swap in there if you like. I am not sure if i am answering your question though as I am not totally sure what experience you are trying to build

[SamStonehouse]

I'm going to close this so I can stop cluttering your issues and I don't have time to write a test implementation now; thank you for the input :)

[pennersr]

@alexreardon You can indeed implement the swap in the onDragEnd, functionally, but the UX side of things is lacking. You will miss out on the visual feedback while dragging. The item being dragged makes a nice animated soft landing on its designated spot. But, given that the swap is only implemented in the onDragEnd, the item that needs to move over to the original place of the item being dragged does not animate at all and instantly makes the transition. It would be nice to reopen this issue if this is a valid feature request...

[SamStonehouse]

Seems like a more generic feature request should be created regarding animations on custom element movement if you think it's a good idea? I don't think my original request should be opened up as I don't think it reads well enough to be understood and is quite a narrow requirement.

[dzimmanck]

@pennersr @SamStonehouse,

Did this ever get turned into a generic feature request? I too am looking for this functionality.

In my application, I have two lists of items to visualize a knapsack 0/1 problem. The left side of the list represents items which are not in the knapsack. The right side of the list represents items that are in the knapsack. When a user clicks on an item in the left, my application calculates:

1. What the new value of the the clicked item needs to be to qualify it to go in the knapsack.
2. What item (or items) that are currently IN the knapsack (right column) that would need to be taken OUT of the knapsack.

(In reality both of these would be pre-calculated for every selection option)

As the user drags the selected item from the left and drags to the right, the item(s) that need to be popped out slide to the left. The animation of the right items should correspond with the inverse of the dragging motion of the user. So, if the user drags 2cm to the right, the item(s) being popped from the right list move 2cm to the left.

[alexreardon]

Potentially this could be satisfied by #162