sorry the issue title is kinda vague.
I think i can better explain it using the live exmaple: http://sumsy.com/temp/sorttest/
ADDED JS BIN link: http://jsbin.com/ibewar/4/edit
What I want to do it, by clicking on “move down”, it will swap the current div with the next div.
My approach is:
Set the div IDs from 0 to 3
Every time do swap/move down, its always the case that target div id = current div id + 1
after swap completes, reset the IDs again, from 0 to 3, to maintain the order.
The issue:
Try clicking “text A (move down)”, it wraps with text B no problem.
Click on “text A (move down)” again, it should swap with C, because the id for A should be 2, and C is 3.
But the problem is, A swapped with B again.
Looks like DOM is not updated/refresh after the swap?
A is the second on the list, but somehow in html markup it is still showing up as the first.
Any help would be appreciated.
Thanks.
This is because the swap function is not actually re-ordering the DOM, if you notice (using firebug), it is just making the elements position relative. Therefore, you cannot rely on their position in the DOM to determine their id.
What you should do is once the swap animation is complete, physically move the elements in the DOM. You’ll need to wipe out the positioning that was set by the swap method. To re-order the elements in the DOM, you can use the after method.