Javascript 删除后销毁可拖动文件时出错

我在jQuery UI中收到一个错误，当我试图在删除一个DragTable后销毁它时。我正在使用jQuery1.9.1和jQueryUI1.10.0

脚本

$(".drag").draggable({
    revert: "invalid",
    helper: "clone"
});

$(".drop").droppable({
    accept: ".drag",
    drop: function(event,ui){
      ui.helper.remove();
      $(this).append(ui.draggable);
      $(ui.draggable).draggable("destroy");
    }
});

HTML

<div class="drag">Draggable</div>
<div class="drop">Droppable</div>

可拖动
可降落

示例：

收到错误

TypeError:$（…）。数据（…）未定义

---

我在这上面花了几个小时，运气不好。我发现一个类似的帖子没有包含决议。有人能帮我吗？谢谢

jquery ui可拖动代码中似乎存在竞争条件，在该代码中，它尝试在拖动停止时设置光标。以下行失败，因为调用stop时“draggable”数据尚未附加到draggable div

var o = $(this).data('draggable').options;

这是一个有点黑客，但这个设置超时将修复它

$(".drop").droppable({
    accept: ".drag",
    drop: function(event,ui){
      ui.helper.remove();
      $(this).append(ui.draggable);
      setTimeout(function() {
          $(ui.draggable).draggable("destroy");      
      }, 0);      
    }
});

---

我不建议您使用

setTimeout

hack。 真正按需调用destroy方法的正确方法是在调用

destroy

方法之前删除特殊类

ui draggable draggable

。 因此，您的代码如下所示：

$(".drop").droppable({
    accept: ".drag",
    drop: function(event,ui){
      ui.helper.remove();
      $(this).append(ui.draggable);
      var dragElem = $(ui.draggable);
      // this will destroy the item
      dragElem.removeClass('ui-draggable-dragging').draggable("destroy");
    }
});

检查可拖动的代码，以了解发生了什么以及为什么要删除此类