Frage jQuery UI Droppable Uncaught TypeError


Es ist schwer, dieses Problem zu beheben.

Verwenden von jQuery UI Droppable in einer Backbone-Anwendung mit CoffeeScript.

Es ist nichts falsch mit der Funktionalität, alles funktioniert, wie ich es beabsichtigte, aber ich bekomme immer noch diesen Konsolenfehler jedes Mal, wenn ein Gegenstand fallen gelassen wird.

Uncaught TypeError: Cannot read property 'options' of undefined

Code für das Dropable:

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

Wie ich schon sagte, funktioniert die Funktionalität richtig, ich möchte den Fehler nur loswerden, wenn jemand etwas weiß, das ich versuchen könnte zu debuggen.

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

Danke für jede Hilfe.


9
2018-03-19 16:37


Ursprung


Antworten:


Dies scheint endgültig in v1.11.0 behoben zu sein, ohne die hier vorgeschlagenen Problemumgehungen:

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

Es scheint, dass das Entfernen des ursprünglichen ziehbaren Elements jetzt nicht zu diesem Fehler führt, da die Eigenschaften jetzt auf dem instance Feld. Ich habe bestätigt, dass v1.11.0 diesen genauen Fehler behebt, der auf v1.10.4 auftauchte.


2
2017-07-14 23:01



Es scheint damit zu tun zu haben, das verlorene Objekt während des Drop-Ereignisses zu zerstören. Ich konnte das Problem umgehen, indem ich den Destroy Call verzögerte:

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

8
2017-10-31 04:07



Für mich hat keine der vorgeschlagenen Lösungen funktioniert. Wie Sie bereits erwähnt haben, liegt dies an der Entfernung des Elements, bevor der Drop beendet wird. Meine sehr einfache Lösung dafür war nicht remove() das Element, aber nur detach() das Element und an anderer Stelle anhängen.

Also für mich bin ich umgezogen von:

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

Das gab mir die Optionen Ausnahme zu:

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

Als die jQuery's detach () -Dokumentation Dies funktioniert, weil "... alle jQuery-Daten mit den entfernten Elementen verknüpft sind".

Wenn Trennen und Anhängen eine Option für Sie ist, scheint es mir eine sehr saubere Lösung zu sein.


5
2017-11-27 09:19



Ich habe den gleichen Fehler gefunden, und ich denke, dass das passiert, wenn Sie das Drop-Element im Drop-Ereignis entfernen oder entfernen. wenn Sie das ursprüngliche Element als Helfer verwenden.

Ich bin immer noch auf der Suche nach einer besseren Möglichkeit, das gezogene Element in das DOM zu lösen und wieder einzufügen


2
2017-10-26 18:40



@Dira zeigte auf einen Thread mit einem Problem, das denselben Code in jQuery UI umgibt, aber die Lösung dort funktionierte nicht für mich.

Ich habe den Code in der jQuery UI-Quelle kommentiert und der Fehler ist verschwunden.

Nach wie vor funktioniert alles wie gewünscht.

Der Block, den ich auskommentierte:

$.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
2018-03-30 19:46



Mein Ansatz zur Lösung dieses Problems besteht darin, das STOP-Ereignis von ziehbarem zu verwenden.

Wenn ein Objekt gelöscht wird und zum Entfernen bereit ist, feuern Sie ein Ereignis in die ziehbare Ansicht zurück, um @isRemove = true festzulegen. Die ziehbare Ansicht sollte im STOP-Ereignis etwa so aussehen:

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

1
2018-02-20 09:52