jQuery拖放后不能拖放

Question

我有两个div，每个都包含一个数量和项目清单。这些项目是可拖放的，包含这些项的div是可下垂的。如果同名的项出现在该div中，则不能再次将该项放在该div上。最终，我将控制被移动的项目的数量，但我只是想让这个部分暂时发挥作用。

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

当我将安莉添加到ul时，相同的代码起作用了，但是我只想移动项目的名称，而不是数量，所以我使用div代替li。

下面是我的代码的一部分：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

问题是，可拖放的调用是在拖放时破坏()，这样就失去了拖放能力。一种肮脏的方法是再次拖动掉的元素：

$("#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排序