JQuery UI：可拖动项目在克隆拖放后失去拖放能力答案

【问题标题】：JQuery UI: draggable item loses ability to drag/drop after clone-dropJQuery UI：可拖动项目在克隆拖放后失去拖放能力
【发布时间】：2015-07-06 08:35:45
【问题描述】：

我有一些用户可以移动到目标 div 的 div。如果它们被删除，一个新的 div 将被添加到那里。但是现在用户应该能够一次又一次地做到这一点。但是在克隆被丢弃后（在任何地方 - 不仅在 droppable 中），原始项目就失去了丢弃的能力。如何更改用户可以将原始项目多次移动到目标div？

以下代码显示了一个脚本示例，它可以运行 1 次。一次下降后，第一部分不再起作用。删除后我尝试再次添加此功能。

   $('.move-me').draggable({
     revert: "invalid",
     helper: "clone"
   });

   $('#target').droppable({
     accept: '.move-me',
     drop: function (event, ui) {
       $(this).append('<div>You dropped an element here</div>');
     }
   });

【问题讨论】：

$('#target').droppable({ 你不是在克隆这个ID，是吗？每个 ID 只能有一个元素。
我只使用 helper-clone 将 '.move-me' 元素一直放置在起始位置，并且可以使用 droppable 功能。如果“克隆”被丢弃，它就会消失。一个新的 div 被附加，没有任何 ID 或对“.move-me”元素的任何引用。

标签： jquery jquery-ui drag-and-drop draggable jquery-ui-draggable

【解决方案1】：

我刚刚更改了您的可放置代码。请检查一次。

$('.move-me').draggable({
     revert: "invalid",
     helper: "clone",
    cursor : "move",
   });

   $('#target').droppable({
     accept: '.move-me',
     drop: function (event, ui) {
// Make sure you are cloning your draggable and use that div to modify as per your requirement
    var html = $(ui.draggable).clone(true);
     ui.draggable.draggable('enable');
       $(this).append('<div>You dropped an element here</div>');
     }
   });

很高兴，如果它有效。

【讨论】：

试过了，但没有任何改变。仍然无法再次移动元素。

【解决方案2】：

我有同样的问题。我通过更新 css 规则对这个问题进行了排序。我将元素拖放到一个 div 中，该 div 的 z-index 比被删除的项目高。我刚刚添加了一个类并将 z-index 值设置为大于放置容器的值。这解决了我的问题。

如果上述任何答案都不起作用，希望这可能会有所帮助。

【讨论】：

【解决方案3】：

我知道这有点晚了，但是如果您再次调用 draggable() 似乎它必须在文档就绪函数之外。当我再次调用它时，我移到了 ready 函数之外，它就像一个魅力。

【讨论】：