jQuery UI Droppable Uncaught TypeError

Question

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.

Answer 1

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

Answer 2

For me, none of the proposed solutions worked. As you already mentioned, this is because of the removal of the element before the drop finishes. My very easy solution to this was not to remove() the element, but to only detach() the element and append it somewhere else.

So for me I moved from:

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

which gave me the options exception to:

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

As the jQuery's detach() documentation states this works because it "...keeps all jQuery data associated with the removed elements."

If detach and append is an option for you, it appears to me to be a very clean solution.