我希望能够重复拖放相同的源元素。
当拖动图像时，它已成功克隆 - 即原始图像保持不变，克隆图像很好地落入新位置，但旧图像不再可拖动。检查元素显示 class 作为属性(无值)，即不是 class="ui-draggable"
正如您所见，我尝试在克隆后重新启用原始文件的可拖动性，但它不起作用。
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<title></title>
<script language="javascript" type="text/javascript">
var copy = 0;
var dragOptions = {
helper: 'clone',
cursor: 'hand',
revert: 'invalid'
};
$(document).ready(function () {
$("img").draggable(dragOptions);
$("ul#bag > li").droppable({
drop: function (event, ui) {
copy++;
var clone = $(ui.draggable).clone().attr("id", "img_" + copy);
$(this).append(clone);
clone.css("left", 0).css("top", 0);
$(ui.draggable).draggable(dragOptions);
}
});
});
</script>
<style type="text/css">
li
{
position: relative;
float: left;
}
img
{
cursor: move;
}
div, li
{
display: block;
width: 160px;
height: 123px;
margin: 2px;
border: solid 1px gray
}
.clear
{
clear: both;
}
</style>
</head>
<body>
<ul id="bag">
<li></li>
<li></li>
<li></li>
</ul>
<ul id="shop">
<li><img id="img1" src="images/p1.jpg" /></li>
<li><img id="img2" src="images/p2.jpg" /></li>
<li><img id="img3" src="images/p3.jpg" /></li>
</ul>
<div class="clear" id="dustbin" style="background-color:Black;"></div>
</body>
</html>
最佳答案
因此，一旦项目被拖动，可拖动小部件就会调用其自己的 destroy() 函数，该函数会从元素中删除任何可拖动性。
由于没有明显的方法可以用选项或事件覆盖它，我在 document.ready 中用暴力覆盖了它:
$.ui.draggable.prototype.destroy = 函数 (ul, item) { };
现在可以了。
关于jquery 可拖动元素在放置后不再可拖动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5020695/