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 drag /drop and clone

我实际上必须使用看起来像

的代码

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

去做。

Answer 4

这是我的解决方案，它允许拖放克隆，然后根据需要通过另一次拖放替换它。它还有一个回调函数参数，该参数传回已删除的div对象，以便您可以在删除后使用jquery选择的div执行某些操作。

def initialize(attributes = nil, options = {})
  super
  self.number = Random.new.rand(1..1000)
end

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

4 个答案: