Javascript jQuery可拖动的isn'；落下后无法拖动

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

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

当我将一个li添加到ul时，完全相同的代码起作用，但我只想移动项目的名称，而不是数量，因此我使用div而不是li

以下是我的代码：

以下是相关部分

      $(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>

$（函数（）{
$（“#inventory1.item”）。可拖动({
附：“身体”，
助手：“克隆”
});
$（“#目录2”）。可拖放({
drop：函数（事件、用户界面）{
var item=ui.draggable.attr（“数据项”）；
变量数量=ui.draggable.attr（“数据数量”）；
var itemDesc=ui.draggable.text（）；
if（！$（this.find（“[data item='”+item+']”）.length）{
$（“”）.文本（数量）.appendTo（此）；
$（“”）.text（itemDesc）.appendTo（this）；
}
}
});
$（“#inventory2.item”）。可拖动({
附：“身体”，
助手：“克隆”
});
$（“#库存1”）。可拖放({
drop：函数（事件、用户界面）{
var item=ui.draggable.attr（“数据项”）；
变量数量=ui.draggable.attr（“数据数量”）；
var itemDesc=ui.draggable.text（）；
if（！$（this.find（“[data item='”+item+']”）.length）{
$（“”）.文本（数量）.appendTo（此）；
$（“”）.text（itemDesc）.appendTo（this）；
}
}
});
});
清单1
7项目1
5项目2
2项目3
9项目4
清单2
4项目1
2项目5

---

有什么想法吗？谢谢。

问题是，DragTable在拖放时调用它的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);
    }
  }
});

$（“#目录2”）。可拖放({
drop：函数（事件、用户界面）{
var item=ui.draggable.attr（“数据项”）；
变量数量=ui.draggable.attr（“数据数量”）；
var itemDesc=ui.draggable.text（）；
if（！$（this.find（“[data item='”+item+']”）.length）{
$（“”）.文本（数量）.appendTo（此）；
$（“”）.text（itemDesc）.draggable（{appendTo:“body”，helper:“clone”}）.appendTo（this）；
}
}
});

但它不会再被丢弃了

您必须使用可拖动/可放下的吗？ 只需使用jQueryUI自己的可对连接列表进行排序即可。它已经在jQueryUI中得到了完美的实现：

---

这太完美了。它工作得很好。它似乎又可以放下了。我目前的代码不允许重复，因为我不允许重复，但从长远来看，这不是我想要的行为。一旦我提出了独特性的要求，它就完美地工作了。非常感谢。如果你愿意的话，我想问你一个问题。我尝试通过将我正在创建的新div的代码更改为：

$（“”）text（itemDesc）.draggable（）.appendTo（this），从而使删除的元素可拖动但它只是给出了非常奇怪的结果。为什么你的工作？@user1118374你忘记传递你的设置
{appendTo:“body”，helper:“clone”}
。您的元素应该是可以拖动的，而不需要传递它，但是jQueryUI会弄乱定位和Domtree，因为它使用了一些不适合您的Domtree和stylesettings的标准设置<代码>$（“”）.text（itemDesc）.draggable（{appendTo:“body”，helper:“clone”}）.appendTo（this）应该还能正常工作。