在下面的代码中,在克隆元素时,它会克隆之前添加的元素。拖动第二个元素时,它也会克隆第一个元素。总共会出现 3 个元素。如何仅克隆当前div?.
$(document).ready(function($) {
var a=0;
$("div[id^='product']").draggable({
helper: function () {
return $("<div class='dragger'></div>").append($(this).clone().append("<button>remove</button>"));
}
});
$("#dropcombo").droppable({
drop: function (event, ui) {
a++;
$(this)
.find("p")
.text(a);
var element = $('.ui-draggable-dragging');
var currentDrop=$(this);
return element.clone().appendTo(currentDrop);
}
});
$(document).on('click', 'button', function(){
$(this).parent().remove();
});
});
<div id="product1" class="draggable">
<h1>AA</h1>
</div>
<div id="product2" class="draggable">
<h1>AA</h1>
</div>
<div id="product3" class="draggable">
<h1>AA</h1>
</div>
<div id="product4" class="draggable">
<h1>AA</h1>
</div>
<div id="dropcombo">
<h3>Drop packages to buy</h3>
<div> you have selected <p>0</p> packages</div>
<img id="imgg" src="images/Packages.png">
</div>
最佳答案
您必须首先阅读 jquery draggable 中的文档
然后通过定义可拖动事件来帮助自己。当这两种情况下的拖动开始和拖动停止事件都会被触发时,首先定义这些回调,然后您需要使用所需的操作手动操作可拖动事件
关于jquery - 如何选择当前拖动的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31925990/