4

当我尝试在拖放后销毁可拖动对象时，我在 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/

收到错误

类型错误：$(...).data(...) 未定义

我在过去的几个小时里都没有运气。我发现了一篇类似的帖子，其中不包含决议。有谁可以帮我离开这里吗？谢谢！

4

2 回答 2

7

看起来 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);      
    }
});
于 2013-03-19T19:24:38.670 回答
1

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

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

于 2015-07-02T09:00:30.370 回答