Die HTML5-Drag-and-Drop-(DnD)-API bedeutet, dass fast jedes Element auf einer Seite ziehbar werden kann. In diesem Artikel behandeln wir die Grundlagen von Drag & Drop.
Erstellen Sie ziehbare Inhalte
Es ist erwähnenswert, dass in den meisten Browsern Textauswahlen, Bilder und Links standardmäßig gezogen werden können. Wenn Sie zum Beispiel das Google-Logo in der Google-Suche ziehen, sehen Sie ein Geisterbild. Das Bild kann dann in die Adressleiste, <Eingabetyp="Datei" /> Element, oder sogar auf dem Desktop gezogen und abgelegt werden. Um andere Arten von Inhalten draggbar zu machen, musst du die HTML5-DnD-API verwenden.
Um ein Objekt draggable zu machen, setze das Elementdraggable=wahr。 Das Ziehen kann für fast jedes Element unterstützt werden, einschließlich Bildern, Dateien, Links, Dateien oder jedem Markup auf einer Seite.
In unserem Beispiel erstellen wir eine Benutzeroberfläche, um einige Spalten neu zu ordnen, die über CSS Grid angeordnet wurden. Das grundlegende Markup für diese Spalten ist unten dargestellt, wobei die draggable-Eigenschaft für jede Spalte auf true gesetzt wird.
Hier ist das CSS für meine Container- und Box-Elemente. Beachten Sie, dass die einzige CSS-Funktionalität, die mit DnD zu tun hat, die Cursor: Move-Eigenschaft ist. Der Rest des Codes steuert nur das Layout und den Stil der Container- und Box-Elemente.
An diesem Punkt wirst du sehen, dass du den Gegenstand ziehen kannst, aber sonst passiert nichts. Um DnD-Funktionalität hinzuzufügen, müssen wir die JavaScript-API verwenden.
Hören Sie nach Drag-Events
Viele verschiedene Ereignisse können angehängt werden, um den gesamten Drag-and-Drop-Prozess zu überwachen.
- Dragstart
- ziehen
- dragenter
- dragleave
- Dragover
- Tropfen
- dragend
Um einen DnD-Strom zu verarbeiten, brauchst du eine Art Quellelement (den Ausgangspunkt des Drags), die Datennutzlast (das, was du platzieren willst) und das Ziel (den Bereich, in dem der Snap platziert wird). Quellelemente können Bilder, Listen, Links, Dateiobjekte, HTML-Blöcke usw. sein. Das Ziel ist es, die Drop-Zone (oder die Menge von Drop-Zonen) der Daten, die der Nutzer platzieren möchte, zu akzeptieren. Beachten Sie, dass nicht alle Elemente Ziele sein können, zum Beispiel können Bilder keine Ziele sein.
Start und Ende der Drag-and-Drop-Sequenz
Nachdem Sie die draggable="true"-Eigenschaft im Inhalt definiert haben, fügen Sie einen Dragstart-Ereignishandler an, um die DnD-Sequenz für jede Spalte zu starten.
Dieser Code stellt die Opazität der Spalte auf 40 %, wenn der Benutzer zu ziehen beginnt, und setzt sie am Ende des Drag-Events auf 100 % zurück.
Die Ergebnisse sind unten in der Glitch-Demo zu sehen. Zieht man einen Gegenstand, wird er undurchsichtig. Da das Dragstart-Event das Quellelement anvisiert, erhält der Nutzer visuelles Feedback, wenn man this.style.opacity auf 40 % setzt, dass sich das aktuell ausgewählte Element bewegt. Nachdem das Element platziert wurde, kehrt das Quellelement auf 100 % Opazität zurück, obwohl die Platzierungsfunktion noch nicht geschrieben wurde.
Verwenden Sie Dragenter, Dragover und Dragleave, um zusätzliche visuelle Hinweise hinzuzufügen
Um den Nutzern zu helfen, zu verstehen, wie man mit Ihrer Benutzeroberfläche interagiert, verwenden Sie Dragenter-, Dragover- und Dragleave-Ereignishandler. Im folgenden Beispiel können die Spalten gezogen oder gezielt werden. Um den Nutzern das zu erleichtern: Wenn der Nutzer ein Element an einer Spalte vorbeizieht, wird der Rand dieser Spalte zu einer gestrichelten Linie. Zum Beispiel kannst du in CSS eine Over-Klasse erstellen, um ein Element darzustellen, das ein Platzierungsziel ist:
Richte dann einen Ereignishandler in JavaScript ein, der beim Ziehen einer Spalte die Überklasse hinzufügt und beim Verlassen entfernt. Im Dragend-Handler möchten wir außerdem sicherstellen, dass die Klasse am Ende des Drags entfernt wird.
In diesem Code sind einige Punkte zu erwähnen:
Wenn man ein Element wie einen Link zieht, muss man das Standardverhalten des Browsers blockieren, nämlich zu diesem Link zu navigieren. Dazu rufe e.preventDefault() im Dragover-Event auf. Eine weitere gute Praxis ist, im selben Handler falsch zurückzugeben.
Nutze den Dragenter-Event-Handler, um die Klassen zu wechseln, nicht Dragover. Wenn du Dragover verwendest, wird die CSS-Klasse mehrfach umgeschaltet, weil der Event Dragover immer wieder ausgelöst wird, wenn die Spalte schwebt. Letztlich führt das dazu, dass der Renderer des Browsers eine Menge unnötige Arbeit leistet. Es ist am besten, das Neuzeichnen immer auf ein Minimum zu beschränken. Wenn du aus irgendeinem Grund Dragover-Events verwenden musst, solltest du in Erwägung ziehen, Event-Listener zu begrenzen oder zu entfernen.
Mach die Platzierung fertig
Um die tatsächliche Platzierung zu übernehmen, füge einen Event-Listener für das Drop-Event hinzu. In einem Drop-Handler muss man das Standard-Platzierungsverhalten des Browsers blockieren, was meist eine Art nervige Weiterleitung darstellt. e.stopPropagation() kann aufgerufen werden, um zu verhindern, dass das Ereignis den DOM auslöst.
Achte darauf, den neuen Handler im anderen Handler zu registrieren:
Wenn du den Code zu diesem Zeitpunkt ausführst, wird das Projekt nicht an einem neuen Ort platziert. Um dies zu erreichen, müssen Sie ein DataTransfer-Objekt verwenden.
Die DataTransfer-Eigenschaft ist der Ort, an dem all die DnD-Wunder passieren. Es speichert die im Drag Operation gesendeten Datenfragmente. dataTransfer wird im Dragstart-Event gesetzt und im Drop-Event gelesen/verarbeitet. Rufen Sie e.dataTransfer.setData(mimeType, dataPayload) auf, um den MIME-Typ und die Datennutzlast des Objekts festzulegen.
Im folgenden Beispiel erlauben wir den Nutzern, die Reihenfolge der Spalten neu zu ordnen. Dazu müssen Sie zunächst das HTML des Quellelements am Anfang des Ziehens speichern:
Verwalten Sie die Spaltenplatzierung im Drop-Event, setzen Sie das HTML der Quellspalte auf das HTML der Zielspalte, in der sie platziert wird, und überprüfen Sie zunächst, ob die vom Benutzer gezogene und geplatzte Zielspalte dieselbe ist wie die Quellspalte.
Mehr Widerstandseigenschaften
Das dataTransfer-Objekt stellt Eigenschaften offen, die dem Benutzer während des Ziehens visuelles Feedback geben. Diese Eigenschaften können auch verwendet werden, um zu steuern, wie jedes Platzierungsziel auf bestimmte Datentypen reagiert.
- dataTransfer.effectAllowed begrenzt die "Art des Drags", den ein Benutzer an einem Element ausführen kann. Es wird im Drag-and-Drop-Handlingsmodell verwendet, um dropEffect während Dragenter- und Dragover-Events zu initialisieren. Diese Eigenschaft kann auf folgende Werte gesetzt werden: keine, kopieren, kopieren, kopieren, verschieben, link, link, verschieben, alle und uninitialisiert werden.
- dataTransfer.dropEffect steuert das Feedback, das dem Benutzer während Dragenter- und Dragover-Events gegeben wird. Wenn der Benutzer mit der Maus über das Zielelement fährt, zeigt der Cursor des Browsers die Art der auszuführenden Aktion an (z. B. Kopieren, Verschieben usw.). Der Effekt kann einer der folgenden Werte sein: keine, kopieren, verlinken, bewegen.
- e.dataTransfer.setDragImage(imgElement, x, y) zeigt an, dass das Standard-Feedback des Browsers "Geisterbild" nicht verwendet wird, stattdessen gibt es eine Option, das Drag-Symbol einzustellen.
Dateien per Drag & Drop hochladen
Das folgende einfache Beispiel verwendet eine Spalte als Drag-Quelle und Drag-Ziel. Dies zeigt sich in der Benutzeroberfläche, wenn der Nutzer gebeten wird, die Elemente neu zu ordnen. In manchen Fällen kann das Ziehen des Ziels und das Ziehen des Quellcodes unterschiedlich sein, etwa in einer Schnittstelle, in der der Benutzer ein Bild als Hauptbild des Produkts auswählen muss, indem er das ausgewählte Bild auf das Ziel zieht.
Drag & Drop werden oft verwendet, um Benutzern Elemente vom Desktop in die App zu übertragen. Der Hauptunterschied ist der Abwurfhandler. Ohne den Zugriff auf die Datei mit dataTransfer.getData() werden die Daten der Datei in die Eigenschaft dataTransfer.files aufgenommen:
Originallink:Der Hyperlink-Login ist sichtbar.
|
Veröffentlicht am 26.04.2022, 10:30:50
|
|
|
|
Veröffentlicht am 26.04.2022, 21:27:25
|
