I’m not sure how to ask this, but I am looking to create an interface where three elements exist on the left (A, B, C) and can be dragged to three elements on the right (1, 2, 3).
I would like the left item to snap to a right item when dropped, but then be interchangeable with the other two items.
I can get A, B, and C to snap to the right side, but can’t seem to get them to be able to be swapped. If I set the ui.draggable.position on the drop, then I can’t figure out how to rearrange them on the right. I’ve tried cloning and deleting them to no avail, I ended up getting some error.
I have this so far: http://jsfiddle.net/7xFsr/13/
Thanks in advance!
I know I have a specific problem, but here’s my solution. Finally figured out how to manipulate the jQuery UI
position()feature.I created an array that housed the ids of each starting nodes as well as their wrappers (to revert the position).
On drop, I had a method go through the array and find out if there is anything dropped in that position. If not, no problem. If so, go back into the array and find the current item being dropped and get its previous container. Select the one already there and change its position to the current one’s previous position, and place the current one in the now empty position.
Kind of convoluted, but I worked it out using the same jsfiddle: http://jsfiddle.net/7xFsr/35/
Hope this helps someone!