当我做一个可拖动的克隆和可投放砸我不能再拖动它
-
22-08-2019 - |
题
当我做一个可拖动的克隆和可投放砸我不能再拖动。我怎么做?其次我只能找出如何我们.append
到克隆添加到可放开。但随后其卡到任何现有的元件,而不是下降位置后的左上角。
$(document).ready(function() {
$("#container").droppable({
drop: function(event, ui) {
$(this).append($(ui.draggable).clone());
}
});
$(".product").draggable({
helper: 'clone'
});
});
</script>
<div id="container">
</div>
<div id="products">
<img id="productid_1" src="images/pic1.jpg" class="product" alt="" title="" />
<img id="productid_2" src="images/pic2.jpg" class="product" alt="" title="" />
<img id="productid_3" src="images/pic3.jpg" class="product" alt="" title="" />
</div>
解决方案
要做到这一点的一种方式是:
$(document).ready(function() {
$("#container").droppable({
accept: '.product',
drop: function(event, ui) {
$(this).append($("ui.draggable").clone());
$("#container .product").addClass("item");
$(".item").removeClass("ui-draggable product");
$(".item").draggable({
containment: 'parent',
grid: [150,150]
});
}
});
$(".product").draggable({
helper: 'clone'
});
});
但我不知道这是否是好的,干净的编码。
其他提示
我发现通过谷歌这个问题。我不能保持的位置对齐到容器或者,直到我当追加变更“ui.draggable”到“ui.helper”:
$(this).append($(ui.helper).clone());
有关那些试图重新定位下降项。就拿这里看看。
其实,我不得不使用的代码看起来像
$(item).css('position', 'absolute');
$(item).css('top', ui.position.top - $(this).position().top);
$(item).css('left', ui.position.left - $(this).position().left);
要做到这一点。
下面是我的解决方案,它允许拖放的克隆,然后通过另一拖放根据需要后取代它。它也有其传回跌至DIV对象,这样就可以做一些与所选的DIV一旦下降jQuery的回调函数的参数。
refreshDragDrop = function(dragClassName,dropDivId, callback) {
$( "." + dragClassName ).draggable({
connectToSortable: "#" + dropDivId,
helper: "clone",
revert: "invalid"
});
$("#" + dropDivId).droppable({
accept: '.' + dragClassName,
drop: function (event, ui) {
var $this = $(this),
maxItemsCount = 1;
if ($this.children('div').length == maxItemsCount ){
//too many item,just replace
$(this).html($(ui.draggable).clone());
//ui.sender.draggable('cancel');
} else {
$(this).append($(ui.draggable).clone());
}
if (typeof callback == "function") callback($this.children('div'));
}
});
}
不隶属于 StackOverflow