当我制作一个可拖动的克隆并将其放置在一个可放置区域时，我无法再次拖动它。

Question

我制作了一个可拖动的克隆物，将其放置在可放置区域后再次无法拖动。如何解决这个问题？另外，我只知道如何使用 .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>

- Cudos

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

但我不确定它是否是漂亮且清晰的代码。

- Cudos

---

有点晚了，但是那个 $(this).append($("ui.draggable").clone()); ，应该改成 $(this).append($(ui.draggable).clone()); （不带引号），因为你是从回调参数里加载对象的。 - Barry Chapman

Answer 2

我通过谷歌找到了这个问题。在将元素添加到容器时，我也无法阻止位置回弹，直到我将“ui.draggable”更改为“ui.helper”：

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

- Bob Nadler

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);

要做到这一点。

- rado

Answer 4

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

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

- Damon Hogan