Einfaches JavaScript-Drag-and-Drop ohne die Hilfe einer Bibliothek

Question

Ich bin einfach auf der Suche nach einer Möglichkeit, Drag and Drop ohne Jquery oder eine andere Bibliothek zu verwenden. Wenn ein gezogenes Objekt auf ein anderes Element fallen gelassen wird, sollte das spätere Element ein Ereignis starten (in FF - besser wäre browserunabhängig).

Ich weiß, dass Drag & Drop für JavaScript schon einmal diskutiert wurde, aber die früheren Beiträge haben mir nicht geholfen.

Obwohl ich einige Beispiele gefunden habe, ist mir nicht klar, ob es ein "Drop"- oder "Dragdrop"-Ereignis gibt, aber diese Dinge funktionieren nicht:

<p ondrop='alert("It worked");'>Text</p>
<p ondragdrop='alert("It worked");'>Text</p>

Wie könnte man das machen?

Vielen Dank im Voraus.

Answer 1

Ich stimme den anderen Antworten zu. Eine Bibliothek wird Ihnen viel Zeit und Kopfschmerzen ersparen. Dies kommt von jemandem, der erst kürzlich ein Drag-and-Drop-Steuerelement von Grund auf neu erstellt hat.

Wenn Sie jedoch darauf bestehen, müssen Sie Folgendes tun:

1. Binden Sie ein onmousedown-Ereignis an das div, das Sie ziehen möchten (div.onmousedown).
2. Ändern Sie den Positionsstil des div auf absolut (div.style.position = 'absolute')
3. Beginn der Erfassung von Mausbewegungen (document.onmousemove).
4. Bei Mausbewegung die Position des Divs aktualisieren (div.style.top|left = '[location]px')
5. Auf dem onmouseup-Ereignis des Divs (oder des Dokuments) heben Sie die Bindung aller Handler auf und führen alle anderen Aufräumarbeiten durch (Positionsänderungen löschen usw.).

Einige Probleme wird eine Bibliothek wahrscheinlich lösen:

1. Beim Ziehen markieren Sie Text auf der Seite (sieht hässlich aus).
2. Die Bindung an Ereignisse ist von Browser zu Browser unterschiedlich.
3. Sie müssen die Größe des gezogenen Elements berechnen, wenn Sie Platzhalter anzeigen und dafür sorgen wollen, dass das Element nicht "herausspringt", wenn Sie mit dem Ziehen des Steuerelements beginnen (da ein Wechsel zur absoluten Positionierung das Element aus dem Fluss entfernt).
4. Sie werden wahrscheinlich wollen, dass sich das gezogene Element fließend bewegt, daher müssen Sie bei der Auswahl des Elements einen gewissen Mausversatz speichern oder das Element automatisch auf die Maus zentrieren.
5. Wenn Sie ein Element in eine Liste ziehen möchten, müssen Sie eine Menge weiteren benutzerdefinierten Code für diese Liste schreiben, damit das gezogene Element akzeptiert wird.
6. Sie müssen das Ziehen berücksichtigen, wenn das Fenster gescrollt wird, und möglicherweise das Ziehen innerhalb anderer Elemente, die seltsam positioniert sind.

Answer 2

Hm. Es ist wahrscheinlich nicht so einfach, dass Sie es selbst machen wollen, aber ich würde mir Peter Michauxs FORK Javascript ansehen Bibliothek zum Ziehen und Ablegen -- Im Gegensatz zu JQuery oder all den großen Bibliotheken sind die FORK-Module voneinander entkoppelt und so einfach, dass Sie sich wahrscheinlich Peters Quellcode ansehen und die benötigten Teile herausfinden können. (edit: Ich würde einfach FORK.Drag verwenden, da es wirklich klein ist: 7.6KB total minified)

Answer 3

Ich bin einfach auf der Suche nach einer Möglichkeit, Drag & Drop ohne Jquery oder eine andere Bibliothek zu verwenden.

Es tut mir leid, aber so etwas wie einfaches Ziehen und Ablegen ohne eine Bibliothek gibt es nicht. Sie können alles selbst schreiben, aber das wird eine Menge JS sein, damit es in allen Browsern funktioniert.

Answer 4

Während ich zustimmen, dass Bibliothek der Weg zu gehen ist, ist die Antwort, die Sie wollen onmousedown, onmousemove, onmouseup. Sie haben diese drei Ereignisse zu behandeln.

In onmousedown würden Sie das Ziel finden (event.target oder ähnlich in verschiedenen Browsern) und draggedObject = event.target setzen. Sie beginnen auch mit der Verarbeitung des onmousemove-Ereignisses.

Immer wenn das onmousemove-Ereignis ausgelöst wird, verschieben Sie das gezogene Element auf der Grundlage der Positionsdifferenz seit dem letzten Auslösen des onmousemove-Ereignisses.

Im onmouseup-Ereignis löschen Sie die Variable draggedObject und beenden die Behandlung von onmousemove.

Es ist nicht sehr browserübergreifend, aber es ist der Kern dessen, was Sie für das Ziehen und Ablegen tun müssen.