I have some drag and drop's, when a person drags an item to a drop area what I would to have happen is for the remaining draggables to move to the open areas. For instance:
{A} {1}
{B} {2}
{C} {3}
IF you drag {3} up to {B} it will lock onto {B}, then {2} should move down to where {C} is...
Any ideas how to make that happen? ALSO** The draggable objects MUST snap/lock to the droppable areas.
Okay, so I was finally able to figure out a working solution. If anyone is interested here's what I did:
First off, I created a bunch of drag & drops. Each draggable object has a droppable area. Then, for the positioning of the draggables, I created a variable to store the different positions (based off of the obj height, and margins, etc. The draggables have a position of absolute, which is done based on the parents DIV. So that when I get the positions later I can use them to reposition the objects.
Then, I created a drop function for the droppables so that once an object is dropped, it will record where the object was dropped and put that into an array of positions that have already been taken up. So if I dropped something on [Step 2] and it's 220px down from the top, then I recorded that in the array. Then, immediately following this, I check all of the objects to see which ones have been dropped. So that I know which objects I'm allowed to move.
Now I have the objects that CAN be moved, and the available positions. Then with that, I simply move through the list of open spots and objects that haven't been moved and simply replace them to the open positions. Rather then trying to only reposition on element. I'm essentially reposition everything regardless if it was fine to begin with.
I hope this helps someone.