javascript - jQuery Draggable 放置后不可拖动

Question

我有两个 div，每个都包含数量和项目的列表。这些项目是可拖动的，并且包含这些项目的 div 是可放置的。如果该 div 中出现同名的项目，则无法再次将该项目拖放到该 div 上。最终我将控制移动的项目数量，但我只是想让这部分暂时发挥作用。

我遇到的问题是，一旦我将一个项目放在 div 上，我就无法再拖动它。我尝试将draggable() 添加到我正在创建的新项目中，但这让事情变得很奇怪。

当我向 ul 添加 li 时，完全相同的代码有效，但我只想移动商品名称而不是数量，因此我使用 div 而不是 li。

这是我的代码的jsfiddle:http://jsfiddle.net/imjustabill/eJ4KH/

这是相关部分

      $(function () {
        $("#inventory1 .item").draggable({
            appendTo: "body",
            helper: "clone"
        });
        $("#inventory2").droppable({
            drop: function (event, ui) {
                var item = ui.draggable.attr("data-item");
                var qty = ui.draggable.attr("data-qty");
                var itemDesc = ui.draggable.text();
                if (!$(this).find("[data-item='"+item+"']").length) {
                    $("<div class='qty'></div>").text(qty).appendTo(this);
                    $("<div class='item ui-draggable' data-qty='"+qty+"' data-item='"+item+"'></div>").text(itemDesc).appendTo(this);
                }
            }
        });

        $("#inventory2 .item").draggable({
            appendTo: "body",
            helper: "clone"
        });
        $("#inventory1").droppable({
            drop: function (event, ui) {
                var item = ui.draggable.attr("data-item");
                var qty = ui.draggable.attr("data-qty");
                var itemDesc = ui.draggable.text();
                if (!$(this).find("[data-item='"+item+"']").length) {
                    $("<div class='qty'></div>").text(qty).appendTo(this);
                    $("<div class='item ui-draggable' data-qty='"+qty+"' data-item='"+item+"'></div>").text(itemDesc).appendTo(this);
                }
            }
        });
    });

<div id="inventory1">
<h4>Inventory 1</h4>
    <div class="qty">7</div><div class="item" data-qty="7" data-item="item1">Item 1</div>
    <div class="qty">5</div><div class="item" data-qty="5" data-item="item2">Item 2</div>
    <div class="qty">2</div><div class="item" data-qty="2" data-item="item3">Item 3</div>
    <div class="qty">9</div><div class="item" data-qty="9" data-item="item4">Item 4</div></div>

<div id="inventory2">
<h4>Inventory 2</h4>
    <div class="qty">4</div><div class="item" data-qty="4" data-item="item1">Item 1</div>
    <div class="qty">2</div><div class="item" data-qty="2" data-item="item5">Item 5</div></div>

有什么想法吗？谢谢。

Answer 1

问题是，Draggable 在掉落时调用它的 destroy() ，因此您失去了拖动能力。一种肮脏的方法是让您放置的元素再次可拖动:

$("#inventory2").droppable({
  drop: function (event, ui) {
    var item = ui.draggable.attr("data-item");
    var qty = ui.draggable.attr("data-qty");
    var itemDesc = ui.draggable.text();
    if (!$(this).find("[data-item='"+item+"']").length) {
      $("<div class='qty'></div>").text(qty).appendTo(this);
      $("<div class='item ui-draggable' data-qty='"+qty+"' data-item='"+item+"'></div>").text(itemDesc).draggable({appendTo: "body", helper: "clone"}).appendTo(this);
    }
  }
});

但它不会再被丢弃。

必须使用可拖放吗？只需使用 jQueryUI 自己的带连接列表的可排序即可。它已经完美地实现到 jQueryUI 了: jQueryUI Sortable with connected lists