jQuery可拖动项在交换后失去了可拖动性(使用jsfiddle示例) [英] jQuery draggable items lose their draggability after being swapped (with jsfiddle example)
问题描述
我有两个可拖动jQuery的li元素.当我将框一"拖放到框二"上时，它们被交换了.到目前为止，一切都很好. (延迟解决了
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.
有什么办法解决此问题吗? 完整的jsfiddle此处
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>
推荐答案
因此，在玩完代码之后，这就是我得出的结论.
So after playing with your code, here's the conclusion I've come to.
似乎可拖动的jqueryui方法正在单独跟踪其对象.克隆时，不会克隆该跟踪.我修改了您的代码，如下所示:
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);
});
};
您可以看到令人着迷的结果 http://jsfiddle.net/XkUDv/16/
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.
更新:
仔细研究克隆后，我将javascript更改为:
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 :)
我猜测问题在于，由于clone(true)复制事件处理程序，因此当您尝试将可拖动对象重新附加到新克隆上时，它会看到旧的事件处理程序，而忽略了元素.因此，我将其更改为clone()，而不是clone(true);
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();
希望有帮助！
工作版本: http://jsfiddle.net/XkUDv/21/
这篇关于jQuery可拖动项在交换后失去了可拖动性(使用jsfiddle示例)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
