jQuery drag & drop swap places

0
votes

I am trying to implement a drag & drop swap places functionality, but got stuck at the point where once dragged and dropped items need to be swapped again.

JSFiddle

The idea is simple: i have 9 squares on a grid and every square should be swappable with any other square so that for example

123<br>
456<br>
789

after 1 and 5 swap would become

523<br>
416<br>
789

And after this all squares would be swapable again.

I would really apreciate your help as i am very new to programming and it is still very hard to find the right answers in other code which have a lot of additional functionality... Thank you very much!

1
jquerydrag-and-drop
So what is your problem?what is not working ? - Pratik
After i swap for the first time, I cannot swap those squares again. - skunksts
is this problem for all swap or just 1,5? - Pratik
It is the problem for all squares that have been swapped 1 time. - skunksts

1 Answers

0
votes

Your code that calls .draggable() on your elements is only run at document ready. The cloned elements do not have the listeners/bindings that the originals do. $elem.clone(true, true) should copy those as well. See the JQuery documentation for .clone().

Optionally, in your dropped callback you could add the bindings to the clone instead. Depending on your success with .clone(true, true) as some SO question indicate trouble with that.