当我制作一个可拖动的克隆并将其放入一个droppable时,我无法再拖动它

Question

当我制作一个可拖动的克隆并将其放入一个droppable时,我无法再拖动它.我怎么做？其次,我只能弄清楚如何.append将克隆添加到droppable中.但是它会在任何现有元素之后捕捉到左上角而不是掉落位置.

$(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>

Answer 1

一种方法是:

$(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'
    });
});

但是我不确定它是否干净利落.

Answer 2

我通过Google发现了这个问题.我无法阻止位置捕捉到容器,直到我在追加时将'ui.draggable'更改为'ui.helper':

$(this).append($(ui.helper).clone());

Answer 3

对于那些试图重新定位被删除项目的人.看看这里.

Jquery拖放和克隆.

我实际上不得不使用看起来像的代码

$(item).css('position', 'absolute');
$(item).css('top', ui.position.top - $(this).position().top);
$(item).css('left', ui.position.left - $(this).position().left);

去做吧.