Die Implementierung der Drag-and-Drop-Funktionalität ist einfacher als Sie denken. Erfahren Sie in diesem hilfreichen Leitfaden, wie das geht.

Drag & Drop ist eine wesentliche Funktion, die die Benutzerinteraktion verbessert und ein nahtloses Benutzererlebnis ermöglicht. Egal, ob Sie einen Datei-Uploader, eine sortierbare Liste oder ein interaktives Spiel erstellen möchten, Zu verstehen, wie Sie die Funktionen dieser API nutzen können, ist eine entscheidende Fähigkeit, die Sie in Ihrem Web haben müssen Entwicklungs-Toolkit.

Die Grundlagen von Drag & Drop in HTML

In einem typischen Drag-and-Drop-System gibt es zwei Arten von Elementen: Der erste Typ umfasst ziehbare Elemente, die Benutzer verwenden können kann mit der Maus verschoben werden, und der zweite Typ umfasst ablegbare Elemente, die normalerweise angeben, wo Benutzer eine platzieren können Element.

Um Drag & Drop zu implementieren, müssen Sie dem Browser mitteilen, welche Elemente ziehbar sein sollen. Um ein Element für den Benutzer ziehbar zu machen, sollte dieses Element über eine verfügen

instagram viewer
ziehbarHTML-Attribut einstellen WAHR, so was:

<divdraggable="true">This element is draggablediv>

Wenn der Benutzer ein Drag-Ereignis auslöst, stellt der Browser ein standardmäßiges „Geisterbild“ bereit, das normalerweise eine Rückmeldung zu einem gezogenen Element gibt.

Sie können dieses Bild anpassen, indem Sie stattdessen Ihr eigenes Bild bereitstellen. Wählen Sie dazu das ziehbare Element aus dem DOM aus, erstellen Sie ein neues Bild, um das benutzerdefinierte Feedback-Bild darzustellen, und fügen Sie ein hinzu Dragstart Ziehen Sie den Event-Listener wie folgt:

let img = new Image();
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png';
document.querySelector('div').addEventListener('dragstart', (event)=>{
 event.dataTransfer.setDragImage(img, 10, 10);
})

Im Codeblock oben ist die setDragImage Die Methode hat drei Parameter. Der erste Parameter verweist auf das Bild. Die anderen Parameter repräsentieren jeweils den horizontalen und vertikalen Versatz des Bildes. Wenn Sie den Code im Browser ausführen und mit dem Ziehen eines Elements beginnen, werden Sie feststellen, dass das benutzerdefinierte Drag-Bild durch das zuvor festgelegte benutzerdefinierte Bild ersetzt wurde.

Wenn Sie einen Drop zulassen möchten, müssen Sie das Standardverhalten verhindern, indem Sie beide abbrechen Dragenter Und drüber ziehen Veranstaltungen wie diese:

const dropElement = document.querySelector("drop-target");
dropElement.addEventListener("dragenter", (ev) => {
 ev.preventDefault();
});
dropElement.addEventListener("dragover", (ev) => {
 ev.preventDefault();
});

Verstehen der DragEvent-Schnittstelle

JavaScript-Funktionen a DragEvent Schnittstelle, die eine Drag-and-Drop-Interaktion des Benutzers darstellt. Nachfolgend finden Sie eine Liste möglicher Veranstaltungstypen DragEvent Schnittstelle.

  • ziehen: Der Benutzer löst dieses Ereignis aus, während er ein Element zieht.
  • Dragend: Dieses Ereignis wird ausgelöst, wenn der Ziehvorgang endet oder wenn der Benutzer ihn unterbricht. Ein typischer Ziehvorgang kann durch Loslassen der Maustaste oder Drücken der Escape-Taste beendet werden.
  • Dragenter: Ein gezogenes Element löst dieses Ereignis aus, wenn es ein gültiges Ablageziel erreicht.
  • Schleppblatt: Wenn das gezogene Element ein Ablageziel verlässt, wird dieses Ereignis ausgelöst.
  • drüber ziehen: Wenn der Benutzer ein ziehbares Element über ein Ablageziel zieht, wird das Ereignis ausgelöst.
  • Dragstart: Das Ereignis wird zu Beginn eines Ziehvorgangs ausgelöst.
  • fallen: Der Benutzer löst dieses Ereignis aus, wenn er ein Element auf einem Ablageziel ablegt.

Wenn Sie eine Datei aus einer Umgebung außerhalb des Browsers (z. B. dem Dateimanager des Betriebssystems) in den Browser ziehen, löst der Browser das nicht aus Dragstart oder Dragend Veranstaltungen.

DragEvent kann nützlich sein, wenn Sie ein benutzerdefiniertes Drag-Ereignis programmgesteuert auslösen möchten. Wenn Sie zum Beispiel a div Um benutzerdefinierte Drag-Ereignisse beim Laden der Seite auszulösen, gehen Sie wie folgt vor. Erstellen Sie zunächst einen neuen Benutzerdefiniert DragEvent() so was:

const customDragStartEvent = new DragEvent('dragstart', {
 dataTransfer: new DataTransfer(),
})
const customDragEndEvent = new DragEvent('dragend');

Im Codeblock oben: customDragStartEvent stellt eine Instanz von dar DragEvent(). In customDragStartEventgibt es zwei Konstruktorargumente. Der erste stellt den Drag-Ereignistyp dar, der einer der sieben zuvor erwähnten Ereignistypen sein kann.

Das zweite Argument ist ein Objekt mit a Datentransfer Schlüssel, der eine Instanz von darstellt Datentransfer, worüber Sie später in diesem Handbuch mehr erfahren werden. Als nächstes greifen Sie auf das Element zu, von dem aus Sie das Ereignis auslösen möchten Dokumentobjektmodell (DOM).

const draggableElement = document.querySelector("#draggable");

Fügen Sie dann die Ereignis-Listener wie folgt hinzu:

 draggableElement.addEventListener('dragstart', (event) => {
console.log('Drag started!');
 event.dataTransfer.setData('text/plain', 'Hello, world!'); 
 });
 draggableElement.addEventListener('dragend', () => {
console.log('Drag ended!');
 });

Im ersten Ereignis-Listener oben protokolliert die Rückruffunktion den Text „Ziehen gestartet!“ und ruft die auf setData Methode auf der Datentransfer Grundstück auf der Ereignis Objekt. Jetzt können Sie die benutzerdefinierten Ereignisse wie folgt auslösen:

draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);

Datenübertragung mit dataTransfer

Der Datentransfer Das Objekt dient während eines Drag-and-Drop-Vorgangs als Brücke zwischen dem Quellelement (dem ziehbaren Element) und dem Zielelement (dem ziehbaren Bereich). Es fungiert als temporärer Speichercontainer für Daten, die Sie zwischen diesen Elementen teilen möchten.

Diese Daten können verschiedene Formen annehmen, beispielsweise Text, URLs oder benutzerdefinierte Datentypen, was sie zu einem vielseitigen Werkzeug für die Implementierung einer Vielzahl von Drag-and-Drop-Funktionen macht.

Verwenden von setData() zum Packen von Daten

Um Daten von einem ziehbaren Element auf ein ziehbares Element zu übertragen, verwenden Sie das setData() Methode, die von der bereitgestellt wird Datentransfer Objekt. Mit dieser Methode können Sie die zu übertragenden Daten verpacken und den Datentyp angeben. Hier ist ein einfaches Beispiel:

element.addEventListener('dragstart', (event) => {
 event.dataTransfer.setData('text/plain', 'Hello, world!');
});

Wenn ein Benutzer beginnt, das angegebene Element zu ziehen, setData() verpackt den Text „Hallo Welt!“ mit dem Datentyp Text/einfach. Diese Daten sind nun mit dem Drag-Ereignis verknüpft und können vom Drop-Ziel während des Drop-Vorgangs abgerufen werden.

Daten mit getData() abrufen

Auf der Empfängerseite können Sie im Ereignis-Listener eines abwerfbaren Elements die übertragenen Daten mithilfe von abrufen Daten bekommen() Methode:

element.addEventListener('drop', (event) => {
const transferredData = event.dataTransfer.getData('text/plain');
console.log(`Received data: ${transferredData}`);
});

Der obige Codeblock ruft die Daten mit demselben Datentyp ab (Text/einfach), die mit dem eingestellt wurde setData() Methode früher. Dies ermöglicht Ihnen den Zugriff auf die übertragenen Daten und deren Bearbeitung nach Bedarf im Kontext des abwerfbaren Elements.

Anwendungsfälle für Drag-and-Drop-Schnittstellen

Die Integration der Drag-and-Drop-Funktionalität in Ihre Webanwendungen kann eine wirkungsvolle Verbesserung sein, es ist jedoch wichtig zu verstehen, wann und warum Sie sie implementieren sollten.

  • Datei-Uploader: Wenn Benutzer Dateien direkt von ihrem Desktop oder Dateimanager in einen bestimmten Ablagebereich ziehen können, wird der Upload-Vorgang vereinfacht.
  • Sortierbare Listen: Wenn Ihre Anwendung Listen mit Elementen umfasst, z. B. Aufgabenlisten, Wiedergabelisten oder Bildergalerien, werden Benutzer möglicherweise die Möglichkeit zu schätzen wissen, Elemente per Drag & Drop neu anzuordnen.
  • Interaktive Dashboards: Für Datenvisualisierungs- und BerichtstoolsDrag & Drop kann für Benutzer eine leistungsstarke Möglichkeit sein, ihre Dashboards anzupassen, indem sie Widgets und Diagramme neu anordnen.

Barrierefreiheit im Blick behalten

Während Drag-and-Drop optisch ansprechend sein und das Benutzererlebnis verbessern kann, ist es wichtig sicherzustellen, dass Ihre Implementierung für alle Benutzer, auch für Benutzer mit Behinderungen, zugänglich bleibt. Stellen Sie alternative Interaktionsmethoden bereit, z. B. Tastatursteuerungen, um Ihre Anwendung inklusiv zu gestalten.