jQuery UI Droppable Uncaught TypeError

Question

很难调试这个.

在使用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

谢谢你的帮助.

Answer 1

它似乎与在drop事件期间销毁掉落的项目有关.我通过延迟销毁调用来解决这个问题:

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

Answer 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的detach()文档声明这是有效的,因为它"...保持所有jQuery数据与被删除的元素相关联."

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

Answer 3

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

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

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