Swap elements by drag & drop (jQuery)

I have 4 squares represented like the sketch at the bottom. (or pretend there are only 4 squares in this puzzle demo.) I want to swap any two, horizontally, vertically or diagonally without affecting the other two. In the puzzle demo if you swap any two diagonally, like 1 & 4, some adjacent squares move also which is undesirable.

I was able to do the swap using jQuery's draggable & dropabble. I do the swap in the drop event of the droppable. However the undesirable visual effect is when I drop a square, it reverts and then the switch happens. I don't want the revert to happen. This post has most of my code.

Any ideas on how to stop the revert from happening or how to use the same puzzle demo but have only the two squares, to & from, swap without having other squares move开发者_JAVA技巧? (not sure is this is possible with jQuery sortables)

 1   2
 3   4

This swap animation plugin for jquery might solve your problem nicely.