JQuery UI Droppable Uncaught TypeError

Question

Трудно отладить этот.

Использование jQuery UI Droppable в приложении Backbone с использованием CoffeeScript.

В функциональности нет ничего плохого, все работает так, как я и предполагал, но я все равно получаю эту консольную ошибку каждый раз, когда элемент сбрасывается.

Uncaught TypeError: Cannot read property 'options' of undefined

Код для сбрасывания:

@$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

Похоже, это связано с уничтожением упавшего предмета во время события выпадения.Я смог обойти проблему, отложив вызов уничтожения:

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.

Answer 4

Я столкнулся с той же ошибкой, и, как мне кажется, по результатам моего тестирования это происходит, когда вы отсоединяете или удаляете удаленный элемент в событии отбрасывания.при использовании исходного элемента в качестве помощника.

Я все еще ищу лучший способ отсоединить и снова вставить перетаскиваемый элемент в DOM

Answer 5

Мой подход к решению этой проблемы заключается в использовании события STOP с возможностью перетаскивания.

Когда элемент отброшен и готов к удалению, запустите событие обратно в представление с перетаскиванием, чтобы установить @isRemove = true.Перетаскиваемый вид должен иметь что-то подобное в событии STOP:

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

Answer 6

@ dira указал на поток с проблемой, связанной с тем же кодом в пользовательском интерфейсе jQuery, но решение там не сработало.

Я закомментировал код в исходном коде 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);
  }

}); * * 1 010