jQuery UI Droppable Uncaught TypeError答案

【问题标题】：jQuery UI Droppable Uncaught TypeErrorjQuery UI Droppable Uncaught TypeError
【发布时间】：2012-03-19 16:37:55
【问题描述】：

很难调试这个。

在使用 CoffeeScript 的 Backbone 应用程序中使用 jQuery UI Droppable。

该功能没有任何问题，一切都按我的预期工作，但每次删除项目时我仍然会收到此控制台错误。

Uncaught TypeError: Cannot read property 'options' of undefined

droppable 的代码：

@$el.droppable
        tolerance: 'pointer'
        hoverClass: 'drop_hover'
        accept: '.item'

        drop: (e, ui) =>
            draggedItem = ui.draggable

            itemId = draggedItem.attr 'data-id'

            allInstances = @model.collection.models

            findItems = for instance in allInstances
                          instanceItems = instance.get 'items'
                          instanceItems.getByCid itemId


            compacted = _.compact findItems

            droppedItem = compacted[0]

            droppedCollection = droppedItem.collection

            droppedCollection.remove droppedItem if _.include droppedCollection.models, droppedItem

            @itemCollection.add droppedItem unless _.include @items, droppedItem

就像我说的功能正常工作，如果有人知道我可以尝试调试的任何内容，我只想摆脱错误。

堆栈跟踪

Uncaught TypeError: Cannot read property 'options' of undefined
a.ui.plugin.add.stopjquery-ui.js:49
a.ui.version.a.extend.plugin.call       jquery-ui.js:9
a.widget._trigger                       jquery-ui.js:49
a.widget._mouseStop                     jquery-ui.js:49
a.widget._mouseUp                       jquery-ui.js:28
a.widget._mouseUp                       jquery-ui.js:49
a.widget._mouseDown._mouseUpDelegate    jquery-ui.js:28
f.event.dispatch                        jquery-1.7.1.min.js:3
f.event.add.h.handle.i                  jquery-1.7.1.min.js:3

感谢您的帮助。

【问题讨论】：

错误的堆栈跟踪是否给您任何提示？
对我没用。我将其添加到问题中。
看起来像一个 jQuery 问题。看看这个forum.jquery.com/topic/…

标签： jquery-ui backbone.js drag-and-drop coffeescript

【解决方案1】：

这似乎与在放置事件期间销毁放置的物品有关。我可以通过延迟销毁调用来解决这个问题：

function(evt,ui) {
    setTimeout((function() {
        $(this).draggable("destroy");
    }).bind(ui.draggable),50);
}

【讨论】：

我应该在哪里写这个？我收到与您回答的相同的错误。我对你的答案投了赞成票，因为它似乎也解决了我的问题。

【解决方案2】：

对我来说，建议的解决方案都没有奏效。正如您已经提到的，这是因为在放置完成之前删除了元素。我对此非常简单的解决方案不是 remove() 元素，而是仅 detach() 元素并将其附加到其他地方。

所以对我来说，我从：

aDiv.droppable({
  drop: function(event, ui){
    ui.draggable.remove();
    anotherDiv.append(ui.draggable);
  }
})

这给了我选项例外：

aDiv.droppable({
  drop: function(event, ui){
    ui.draggable.detach();
    anotherDiv.append(ui.draggable);
  }
})

作为jQuery's detach() documentation states，它之所以有效，是因为它“...保留所有与已删除元素关联的 jQuery 数据。”

如果分离和附加是您的选择，在我看来这是一个非常干净的解决方案。

【讨论】：

谢谢，帮了我。如果重复(1000次) detach()，这会导致内存泄漏吗？
Detach 仅从 DOM 中“取消链接”元素，因此它不会创建新对象。内存占用量应该大致相同。不过，如果您真的不再需要这些元素，我以后肯定会完全删除它们。也许 setTimeout(..., 1000) 在延迟后实际上将它们删除，对你有用。
我听说setTimeOut(...,0) 导致函数以某种方式异步执行，我可以在这里使用它还是我必须使用一定的时间（就像你说的那样）？
我不会选择 0 毫秒，而是选择更高的值。您必须确定哪一个仍然适合您的应用程序并在删除时触发它。
感谢指导，对我帮助很大

【解决方案3】：

这似乎最终在 v1.11.0 中得到了正确修复，没有此处提出的所有解决方法：

http://bugs.jqueryui.com/ticket/6889

现在删除原来的可拖动项似乎不会导致此错误，因为属性现在存储在instance 字段中。我已经确认 v1.11.0 修复了这个在 v1.10.4 上弹出的确切错误。

【讨论】：

【解决方案4】：

我遇到了同样的错误，而且我认为，在我的测试中，当您在 drop 事件中分离或移除被丢弃的项目时会发生这种错误。当使用原始元素作为助手时。

我仍在寻找一种更好的方法来将拖动的元素分离并重新插入到 DOM 中

【讨论】：

【解决方案5】：

@dira 指出了一个在 jQuery UI 中围绕相同代码存在问题的线程，但那里的解决方案对我不起作用。

我最终注释掉了 jQuery UI 源代码中的代码并且错误消失了。

和以前一样，一切仍然按预期工作。

我注释掉的块：

$.ui.plugin.add("draggable", "cursor", {
  start: function(event, ui) {
    var t = $('body'), o = $(this).data('draggable').options;
    if (t.css("cursor")) o._cursor = t.css("cursor");
    t.css("cursor", o.cursor);
  },
  stop: function(event, ui) {
    var o = $(this).data('draggable').options;
    if (o._cursor) $('body').css("cursor", o._cursor);
  }

});

【讨论】：

【解决方案6】：

我解决这个问题的方法是利用可拖动的 STOP 事件。

当一个项目被放下并准备好移除时，触发一个事件返回到可拖动视图以设置@isRemove = true。可拖动视图在 STOP 事件中应该有这样的内容：

self = @
@$(".selector").draggable
  stop: (event, ui) ->
    if self.isRemove
      self.remove()

【讨论】：