jQuery draggable 被拖放后不可拖动

Question

我有两个 div，每个 div 都包含一个数量和项目列表。这些项目是可拖动的，包含项目的 div 是可放置的。如果该 div 中出现同名项目，则该项目不能再次拖放到该 div 上。最终我将控制被移动的项目的数量，但我现在只是想让这部分工作。

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

当我将 li 添加到 ul 时，完全相同的代码工作，但我只想移动项目的名称而不是数量，所以我使用 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 自己的Sortable with connected lists。它已经完美地实现到 jQueryUI： jQueryUI Sortable with connected lists