我有两个li元素,它们是jQuery draggable.当我将盒子’one’拖放到方框’two’上时,它们会被交换掉.到现在为止还挺好. (延迟修复了
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)复制事件处理程序,当您尝试将draggable重新附加到新克隆时,它会看到旧的事件处理程序并忽略这些元素.所以我没有克隆(true),而是将其更改为clone();
希望有所帮助！
