Geek Answers Handbook

JQuery draggable elements lose their drag and drop after replacing (using jsfiddle example)

I have two li elements that jQuery are dragging and dropping. When I drag the one box over the two box, they swap places. So far, so good. (Delay fixes another problem described here .) However, items are no longer being dragged, even after resetting their draggable option.

Any ideas how to fix this? full working jsfiddle here

<html> <head> <script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="includes/jquery-ui-1.8.2.custom.min.js"></script> <script type="text/javascript"> jQuery.fn.swapWith = function(to) { return this.each(function() { var copy_to = $(to).clone(true); var copy_from = $(this).clone(true); $(to).replaceWith(copy_from); $(this).replaceWith(copy_to); }); }; $(document).ready(function() { options = { revert: true}; $("li").draggable(options); $('#wrapper').droppable({ drop: function(event, ui) { window.setTimeout("Swap()", 600); } }); }); function Swap() { $('#one').swapWith($('#two')); //trying to fix problem where elements can't be dragged anymore $("li").draggable("destroy"); $("li").draggable(options); } </script> </head> <body> <form> <ul id="wrapper"> <li id='one'> <div style="width: 100px; height: 100px; border: 1px solid green"> one<br /></div> </li> <li id='two'> <div style="width: 110px; height: 110px; border: 1px solid red"> two<br /></div> </li> </ul> <br /> </form> </body> </html>
+7
jquery jquery-ui
source share
2 answers

So, after playing with your code, here is the conclusion I came to.

It seems that the jqueryui drag and drop method tracks its objects separately. When you clone, this tracking is not cloned. I changed your code as follows:

 jQuery.fn.swapWith = function(to) { return this.each(function() { var copy_to = $(to).clone(true).appendTo($("#wrapper")); var copy_from = $(this).clone(true).appendTo($("#wrapper")); //$(to).replaceWith(copy_from); //$(this).replaceWith(copy_to); }); };

You can see the fascinating results http://jsfiddle.net/XkUDv/16/

As you can see, if you drag new cloned objects, it moves the original, not the cloned one.

This is not an answer, but I hope this helps.

UPDATE:

after taking a closer look at the clone, I changed javascript to:

 <script type="text/javascript"> jQuery.fn.swapWith = function(to) { return this.each(function() { var copy_to = $(to).clone(); var copy_from = $(this).clone(); $(to).replaceWith(copy_from); $(this).replaceWith(copy_to); }); }; $(document).ready(function() { options = { revert: true }; $("li").draggable(options); $('#wrapper').droppable({ drop: function(event, ui) { window.setTimeout(function(){ $('#one').swapWith($('#two')); $("li").draggable(options); }, 600); } }); }); </script>

Now it works the way you wanted :)

I assume the problem is that since clone (true) copies the event handlers when you try to re-bind the draggable to new clones, it sees the old event handlers and ignores the elements. So instead of clone (true), I changed it to clone ();

hope this helps!

Working version: http://jsfiddle.net/XkUDv/21/

+3
source share

It seems to me that .replaceWith() not copying data and events like clone does.

I don’t know what you are trying to do in the long run, but I wonder if you can just use sorting and not replace the actual elements. For example: http://jsfiddle.net/Ymhpt/2/

0
source share

More articles:


All Articles