Question

我在jQuery UI中收到错误，当我尝试在删除它后删除一个draggable。我正在使用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（...）未定义

过去几个小时我没有运气。我发现了一个不含分辨率的类似帖子。有人可以帮我从这里出去吗？谢谢！

Answer 1

看起来jquery-ui可拖动代码中存在竞争条件，它在拖动停止时尝试设置光标。以下行失败，因为“draggable”数据没有附加到可拖动的div但是当调用stop时。

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);      
    }
});

Answer 2

我不建议您使用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

丢弃后销毁可拖动时出错

2 个答案: