丢弃后销毁可拖动对象时出错答案

【问题标题】：Error When Destroying Draggable After Drop丢弃后销毁可拖动对象时出错
【发布时间】：2013-03-19 16:57:09
【问题描述】：

我在 jQuery UI 中收到一个错误，当我尝试在放置后销毁可拖动对象时。我正在使用 jQuery 1.9.1 和 jQuery UI 1.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>

示例： http://jsfiddle.net/feDME/

收到错误

TypeError: $(...).data(...) 未定义

过去几个小时我一直在做这件事，但没有运气。我发现了一篇类似的帖子，其中不包含决议。有人可以帮我从这里出去吗？谢谢！

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案1】：

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

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

这有点小技巧，但这个 setTimeout 会解决它。

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

【讨论】：

【解决方案2】：

我不建议您使用setTimeout hack。真正按需调用destroy 方法的正确方法是在调用destroy 方法之前删除特殊类ui-draggable-dragging。因此，您的代码将如下所示：

$(".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");
    }
});

检查可拖动代码，了解发生了什么以及为什么要删除此类https://github.com/jquery/jquery-ui/blob/master/ui/draggable.js#L92

【讨论】：