Question

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

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

当我将li添加到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

问题是，Draggable在drop上调用它的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);
    }
  }
});

但它不会再次出现。

你必须使用draggable / droppable吗？只需使用jQueryUI自己的 Sortable with connected lists 。它已经完美地实现了jQueryUI： jQueryUI Sortable with connected lists

jQuery draggable在被删除后不可拖动

1 个答案: