2009-12-01 15 views
7

Gibt es eine Möglichkeit, ich kann jQuery eine Funktion ausführen, wenn Sie ein Element außerhalb eines DropPable DIV ziehen?jQuery Droppable: Drop außerhalb div?

Nehmen wir an, wir haben ziehbare oder sortierbare Elemente in einem Div und möchten, dass sie gelöscht werden, wenn sie außerhalb ihres übergeordneten div gelöscht werden.

Ich weiß, es gibt das "out" -Ereignis, aber das funktioniert, sobald Sie das Element außerhalb des div ziehen, nicht wenn Sie es fallen lassen (Maustaste loslassen).

Antwort

8

Endlich eine richtige Lösung, obwohl es auch ein bisschen "hacky" ist. Was ich tue, ist, dass ich das Vordergrund-Div mit den ziehbaren Objekten als das drop-fähige setze, aber benutze die Dropover- und Dropout-Features, um zu bestimmen, ob das Element außerhalb des Vordergrund-Divs ist. Wenn es sich außerhalb des div befindet, binde ich das MouseUp-Ereignis, um die Drop-Funktion auszuführen. Wenn es wieder da ist, entbinde ich das mouseup-Ereignis, damit es nicht ausgelöst wird.

Weil ich beim Ziehen bereits die Maustaste gedrückt halte, ist es das gleiche wie das Fallenlassen, was ich in meiner "Hand" habe.

$("#foregroundDiv").droppable({ 
     accept: ".draggableThingy", 
     tolerance: "pointer",  
     out: function(event, ui) { 
      $(ui.helper).mouseup(function() { 
       doSomethingTo(ui.draggable); 
      }); 
     }, 
     over: function(event, ui) { 
      $(ui.helper).unbind("mouseup"); 
     } 
    }); 
+0

Ich hatte genau dieses Problem, und das war die beste Lösung, die ich fand. Vielen Dank! – froadie

1

Warum nicht alle Elemente mit einem anderen Droppable-Div umschlossen, dann die Überprüfung dort?

Was ist, wenn der Benutzer es außerhalb des Browser-Fensters fallen gelassen hat? Würdest du das auch berücksichtigen?

+0

Ich habe versucht, es in einem anderen ablegen, aber das scheint nicht richtig zu funktionieren, egal was. Das dropbare Ereignis "Hintergrund" wird ausgelöst, auch wenn ich in das Divisionsfeld "foreground" delete, wo sich das ziehbare Element befand. Siehe http://stackoverflow.com/questions/1491742/jquery-ui-droppable-background Grundsätzlich habe ich immer noch das gleiche Problem zu kämpfen, nur zurück zu versuchen, es zu beheben. – kasakka

+0

Wenn das Wrapping nicht funktioniert, versuchen Sie zu stapeln, aber Sie müssen den Vordergrund als Geschwister in den Hintergrund setzen, dann setzen Sie einfach den entsprechenden Z-Index, oder falls nicht, CHECK das event.target in der Drop Callback .. drop: Funktion (e) {if (e.targe.id == bg_id) {...} else {...}} – jerjer

+0

Versuchte das, kein Glück. Es scheint, dass die Drop-Funktion keine andere Event-Ziel-ID als die Drop-Funktion selbst erkennt. Zumindest wenn ich versuche, die Konsole einzuloggen, die ID, nur die Drop-Div-Datensätze, alles andere gibt nichts aus. Das Verwenden von Else, um dies zu umgehen, funktioniert auch nicht - es ist entweder etwas tun, wenn es auf das Drop-Div gesetzt wird oder gar nichts tut. Leider funktioniert das nicht, wenn das Hintergrund-div das ganze Fenster ausfüllt, es ignoriert, was oben auf dem div steht. – kasakka

0

Gelöst dies auf eine ziemlich "hacky" Weise: machte einen Tisch mit einem Inhalt div in der Mitte und machte alle anderen Zellen des Tisches löschbar. Im Wesentlichen bedeutet dies, dass Sie ohne Probleme aus dem Center div fallen können, aber es ist immer noch weit von einer guten Möglichkeit, es zu tun.

Wenn jemand einen besseren Weg hat, bitte sagen Sie mir.

Verwandte Themen