我有两个可 jQuery 拖动的 li 元素。当我将框“一”拖放到框“二”上时，它们会被交换。到目前为止，一切都很好。 (延迟修复了 here 描述的另一个问题。)但是，即使在重置其可拖动选项之后，这些元素现在也不再可拖动。
有什么想法可以解决这个问题吗？ 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>
最佳答案
所以在玩完你的代码后，这是我得出的结论。
看起来可拖动的 jqueryui 方法正在单独跟踪其对象。当您克隆时，该跟踪不会被克隆。我修改了你的代码如下:
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/
如您所见，如果拖动新的克隆对象，它会移动原始对象，而不是克隆对象。
这不是一个答案，但我希望它有帮助。
更新:
仔细研究克隆后，我将 javascript 更改为:
<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>
现在它按照你想要的方式工作了:)
我猜测问题是，由于clone(true)复制事件处理程序，当您尝试将可拖动对象重新附加到新克隆时，它会看到旧的事件处理程序并忽略这些元素。所以我把它改为clone()，而不是clone(true)；
希望有帮助!
关于jQuery 可拖动项目在交换后失去其可拖动性(以 jsfiddle 为例)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4589606/