with - jquery ui draggable destroy




當我製作一個可拖動的克隆並將其放入一個droppable時,我無法再拖動它 (3)

當我製作一個可拖動的克隆並將其放入一個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>

一種方法是:

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

但是我不確定它是否乾淨利落。


對於那些試圖重新定位被刪除項目的人。 看看這裡。

Jquery拖放和克隆

我實際上不得不使用看起來像的代碼

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

去做吧。


這是我的解決方案,它允許拖放克隆,然後根據需要通過另一次拖放替換它。 它還有一個回調函數參數,它返回被刪除的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'));
    }
  });
}