Ich habe Elemente auf der Seite, die mit jQuery gezogen werden können. Haben diese Elemente ein Klickereignis, das zu einer anderen Seite navigiert (z. B. normale Links)?
Was ist der beste Weg, um zu verhindern, dass beim Löschen eines solchen Elements ein Klick ausgelöst wird, während das Klicken nicht per Drag & Drop ausgeführt wird?
Ich habe dieses Problem mit sortierbaren Elementen, denke aber, dass es gut ist, eine Lösung für allgemeines Drag & Drop zu haben.
Ich habe das Problem für mich gelöst. Danach stellte ich fest, dass es für Scriptaculous dieselbe Lösung gibt , aber vielleicht hat jemand einen besseren Weg, dies zu erreichen.
javascript
jquery
events
drag-and-drop
jquery-ui-sortable
Alexander Yanovets
quelle
quelle
Antworten:
Eine Lösung, die für mich gut funktioniert hat und keine Auszeit erfordert: (Ja, ich bin ein bisschen pedantisch ;-)
Ich füge dem Element eine Markierungsklasse hinzu, wenn das Ziehen beginnt, z. B. 'noclick'. Wenn das Element gelöscht wird, wird das Klickereignis ausgelöst - genauer gesagt, wenn das Ziehen endet, muss es nicht auf ein gültiges Ziel abgelegt werden. Im Klick-Handler entferne ich die Markierungsklasse, falls vorhanden, andernfalls wird der Klick normal behandelt.
quelle
stop: function(event, ui) { $(this).removeClass('noclick'); }
in den ziehbaren Handler? Andernfalls wird nicht jedes Ziehen und Ablegen irgendwo anders den nächsten Klick auf "Ihre Auswahl" vereiteln.Die Lösung besteht darin, einen Klick-Handler hinzuzufügen, der verhindert, dass sich der Klick beim Start des Ziehens ausbreitet. Entfernen Sie dann diesen Handler, nachdem das Ablegen ausgeführt wurde. Die letzte Aktion sollte etwas verzögert werden, damit die Klickverhinderung funktioniert.
Lösung zum Sortieren:
Lösung für Draggable:
quelle
Ich hatte das gleiche Problem und versuchte mehrere Ansätze und keiner funktionierte für mich.
Lösung 1
tut nichts für mich Das Element wird angeklickt, nachdem das Ziehen abgeschlossen ist.
Lösung 2 (von Tom de Boer)
Dies funktioniert einwandfrei, schlägt jedoch in einem Fall fehl - als ich auf Vollbild ging, klicken Sie auf:
Lösung 3 (von Sasha Yanovets)
Das funktioniert bei mir nicht.
Lösung 4 - die einzige, die gut funktioniert hat
Ja, das ist es - die richtige Reihenfolge macht den Trick - zuerst müssen Sie draggable () binden und dann click (). Selbst wenn ich den Vollbild-Umschaltcode in click () eingefügt habe, wurde er beim Ziehen nicht in den Vollbildmodus verschoben. Perfekt für mich!
quelle
Ich möchte hinzufügen, dass das Klickereignis anscheinend nur funktioniert, wenn das Klickereignis NACH dem ziehbaren oder sortierbaren Ereignis definiert ist. Wenn der Klick zuerst hinzugefügt wird, wird er beim Ziehen aktiviert.
quelle
Ich mag es nicht wirklich, Timer zu verwenden oder zu verhindern. Also habe ich Folgendes getan:
Rocksolid ..
quelle
lex82's version aber für .sortable ()
und Sie brauchen möglicherweise nur:
und hier ist, was ich für den Umschalter verwende:
quelle
Eine mögliche Alternative für Sashas Antwort, ohne die Standardeinstellung zu verhindern:
quelle
In der jQuery-Benutzeroberfläche erhalten Elemente, die gezogen werden, die Klasse "ui-draggable-dragging".
Wir können diese Klasse daher verwenden, um zu bestimmen, ob geklickt werden soll oder nicht. Verzögern Sie einfach das Ereignis.
Sie müssen die Rückruffunktionen "Start" oder "Stop" nicht verwenden. Führen Sie einfach Folgendes aus:
Dies wird eher durch "Mouseup" als durch "Mousedown" oder "Click" ausgelöst - es gibt also eine leichte Verzögerung, die möglicherweise nicht perfekt ist -, aber es ist einfacher als andere hier vorgeschlagene Lösungen.
quelle
Nachdem ich dies und einige Themen durchgelesen hatte, war dies die Lösung, mit der ich mich entschieden habe.
quelle
In meinem Fall hat es so funktioniert:
quelle
Haben Sie versucht, den Link mit event.preventDefault () zu deaktivieren? im Startereignis und erneutes Aktivieren im Drag-Stop-Ereignis oder Drop-Ereignis mit Unbind?
quelle
Nur eine kleine Falte, um die oben gegebenen Antworten zu ergänzen. Ich musste ein div, das ein SalesForce-Element enthält, ziehbar machen, aber das SalesForce-Element verfügt über eine On-Click-Aktion, die im HTML-Code durch ein VisualForce-Gobbledigook definiert ist.
Offensichtlich verstößt dies gegen die Regel "Klickaktion nach der Ziehaktion definieren". Als Problemumgehung habe ich die Aktion des SalesForce-Elements neu definiert, die "onDblClick" ausgelöst werden soll, und diesen Code für das Container-Div verwendet:
Das Klickereignis der Eltern verbirgt im Wesentlichen die Notwendigkeit, auf das untergeordnete Element zu doppelklicken, wodurch die Benutzererfahrung erhalten bleibt.
quelle
Ich habe es so versucht:
quelle
Für mich half es, den Helfer im Optionsobjekt zu übergeben als:
Das Ziehen des gezogenen dom-Elements scheint das Sprudeln des Ereignisses verhindert zu haben. Ich konnte es mit keinem Ereignis vermeiden. Propagation, Sprudeln usw. Dies war die einzige funktionierende Lösung für mich.
quelle
Die Onmousedown- und Onmouseup-Events haben in einem meiner kleineren Projekte funktioniert.
Ja, ich weiß. Nicht der sauberste Weg, aber Sie bekommen die Idee.
quelle
die einfachste und robusteste Lösung? Erstellen Sie einfach ein transparentes Element über Ihrem Draggable.
quelle