jQuery draggable items lose their draggability after being swapped (with jsfiddle example)
I have two li elements which are jQuery draggable. When I drag and drop box 'one' over box 'two', they get swapped. So far so good. (The delay fixes another problem described here.) However the elements now are not draggable anymore, 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"开发者_如何学C>
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>
So after playing with your code, here's the conclusion I've come to.
It looks like the draggable jqueryui method is tracking its objects seperately. When you clone, that tracking isn't cloned. I modified 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 the new cloned objects, it moves the original, not the cloned one.
It's not an answer, but I hope it helps.
UPDATE:
after taking a closer look at clone I changed the 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'm guessing the issue is that since clone(true) copies the event handlers, when you try to reattach the draggable to the new clones it sees the old event handlers and ignores the elements. So instead of clone(true), I changed it to clone();
hope that helps!
Working version: http://jsfiddle.net/XkUDv/21/
加载中,请稍侯......
精彩评论