Alex Rivera | Logout

jQuery UI Droppable Uncaught TypeError

Asked 2012-03-19T16:37:55.030
9

Having a hard time debugging this one.

Using jQuery UI Droppable in a Backbone application using CoffeeScript.

There is nothing wrong with the functionality, everything is working how I intended it to, but I am still getting this console error every time an item is dropped.

Uncaught TypeError: Cannot read property 'options' of undefined

Code for the 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

Like I said the functionality is working properly, I just would like to get rid of the error if someone knows anything I could try to debug.

Stack Trace

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

Thanks for any help.

Edit
Report

1 Answer

8

It does appear to be related to destroying the dropped item during the drop event. I was able to get around the issue by delaying the destroy call:

function(evt,ui) {
    setTimeout((function() {
        $(this).draggable("destroy");
    }).bind(ui.draggable),50);
}
answered 2012-10-31T04:07:26.303

Your Answer