HTML5 Drag & Drop

Von HTML5 ist es möglich, HTML-Elemente in einer HTML-Seite per Drag & Drop. Über JavaScript-Ereignis-Listener können Sie entscheiden, was passiert, wenn der Benutzer Elemente zieht und ablegt.

Beim Ziehen und Ablegen können HTML-Elemente zwei Rollen übernehmen:

1. Ziehbare
2. Drop target / drop zone.

Das ziehbare Element ist das Element, das der Benutzer um die HTML-Seite ziehen und irgendwo ablegen sollte, damit eine Aktion ausgeführt werden kann. Dies kann ein oder mehrere Elemente sein.,

Die Drop-Ziel-oder Drop-Zone ist das Element, auf das die ziehbaren Elemente abgelegt werden.

Drag & Drop-Ereignisse

Um zu steuern, was beim Ziehen und Ablegen von HTML-Elementen passiert, müssen Sie 3 Schritte ausführen:

1. Setzen Sie die HTML-Elemente auf ziehbar.,
2. Ereignis-Listener an die ziehbaren HTML-Elemente anhängen
3. Ereignis-Listener an die Drop target HTML-Elemente anhängen

Die Ereignisse und Attribute sind hier dargestellt:

Zuerst setzen Sie das Attribut draggable="true" auf das HTML-Element(die HTML-Elemente), um es ziehbar zu machen.

Zweitens hängen Sie Ereignislistener an das ziehbare Element für die Ereignisse dragstart und dragend an., Innerhalb dieser Ereignislistener können Sie implementieren, was passieren soll, wenn der Benutzer mit dem Ziehen des Elements beginnt und wenn das Ziehen endet.

Wenn Sie Ereignis-Listener an das Drop-Zielelement anhängen. Die Ereignisse, die Sie hören können, sind dragenter, dragover, dragleave und drop.

Dasdragenter Ereignis wird ausgelöst, wenn der Benutzer das Ziehbare auf das Drop-Ziel zieht., Dieses Ereignis wird nur ausgelöst, wenn sich das ziehbare Element von außen nach außen ändert, was normalerweise durch die Position des Mauszeigers bestimmt wird.

Sobald sich das ziehbare Element über dem Drop-Ziel befindet, wird das Ereignis dragover ausgelöst und wird so lange ausgelöst, wie das ziehbare Element über das Drop-Ziel gezogen wird.

Wenn der Benutzer das ziehbare Objekt erneut aus dem Drop-Ziel zieht, wird das Ereignis dragleave ausgelöst.

Wenn der Benutzer das ziehbare Objekt auf dem Drop-Ziel ablegt, wird das drop Ereignis ausgelöst.,

Beispiel für Drag & Drop-Ereignisse

Hier ist ein Beispiel, mit dem Sie spielen können. Versuchen Sie, das HTML5-Logo auf das Drop-Ziel zu ziehen und zu sehen, was passiert. Versuchen Sie, das Bild sowohl abzulegen als auch erneut herauszuziehen.

div>

Drag & Drop-Code

Lassen Sie uns einen Blick darauf werfen, wie Sie mit den Drag & Drop-Ereignissen umgehen., Zu sehen, dass wir zuerst erstellen Sie ein <img> – element, das wir ziehen können. Hier ist der HTML-Code dafür:

<img src="http://tutorials.jenkov.com/html5/..." draggable="true">

Sobald wir ein ziehbares Element haben, benötigen wir ein Drop-Ziel. Ich werde ein <div> Element verwenden:

<div style="width: 200px; height: 200px;">Drop here</div>

Sobald wir das ziehbare Element und das Drop-Zielelement haben, müssen wir die Ereignis-Listener anhängen., Hier ist der JavaScript-Code dafür:

Die dragStart() – Funktion ruft event.dataTransfer.setData() auf, um die Daten festzulegen, die beim Löschen des Elements an das Drop-Ziel übertragen werden. Welche Daten Sie auch benötigen, um die Drop-Aktion ordnungsgemäß abzuschließen, legen Sie sie hier fest. Sie legen sowohl die Daten als auch ihren MIME-Typ fest.

Die Ereignishandler dragOver() und drop() rufen beide event.preventDefault() auf und geben false zurück. Dies ist notwendig, damit das Ziehen und Ablegen ordnungsgemäß funktioniert., Der Browser hat möglicherweise ein standardmäßiges Drag & Drop-Verhalten, das Sie deaktivieren müssen, damit Ihr Code funktioniert.

Beachten Sie auch, dass die Ereignishandlerfunktion drop() den Datensatz in dragStart() über den Aufruf von event.dataTransfer.getData()liest. Es übergibt den MIME-Typ der Daten als Parameter, um sie ordnungsgemäß zu extrahieren.

Dies ist alles, was benötigt wird, um Drag & Drop in HTML5 zu implementieren. Sie können es jedoch etwas optisch ansprechender gestalten, wie wir im nächsten Abschnitt sehen werden.,

Visuelles Feedback

Sie können die Drag & Drop-Ereignishandlerfunktionen verwenden, um dem Benutzer ein explizites visuelles Feedback zu geben.

Zunächst können Sie das zu ziehende Element markieren, damit der Benutzer sehen kann, welches Element er zieht. Wenn mehrere Elemente gleich aussehen und alle gezogen werden können, ist es für den Benutzer schön zu sehen, welches gezogen wird. Sie können dies als Antwort auf das dragstart Ereignis tun. Hier ist ein Beispiel:

Sobald das Ziehen beendet ist, möchten wir den Rand jedoch erneut entfernen., Dies geschieht als Antwort auf das Ereignis dragend. So wird das gemacht:

Jetzt erhält der Benutzer ein visuelles Feedback, das zeigt, welches Element gezogen wird.

Wir möchten dem Benutzer auch zeigen, dass es möglich ist, das ziehbare Element zu löschen, wenn es über das Drop-Ziel gezogen wird. Auch hier werden wir den Rand des Elements ändern. Wir werden dies als Antwort auf die Ereignisse dragenter, dragleave und drop tun., So wird das gemacht:

Jetzt wird der Rand des Drop-Ziels grün und gestrichelt, wenn das ziehbare Element darüber gezogen wird. Der Rahmen wird entfernt, wenn das ziehbare Element erneut herausgezogen wird oder wenn das Element auf dem Drop-Ziel abgelegt wird.

Im obigen Beispiel wurde die Ereignishandlerfunktion dragOver() nicht angezeigt, aber stellen Sie sicher, dass Sie sie hinzufügen, um das standardmäßige Browserverhalten zu verhindern.,

Hier ist der vollständige Code, nachdem das visuelle Feedback hinzugefügt wurde:

Das DataTransfer-Objekt effectsAllowed, dropEffect und setDragImage ()

Sie können das visuelle Feedback, das dem Benutzer während Drag & Drop-Aktionen gegeben wird, mit dem Objekt DataTransfer erhöhen. DasDataTransfer – Objekt verfügt über 2 Attribute und eine Funktion, die Sie für diesen Zweck verwenden können., Dies sind:

• effectsAllowed
• dropEffect
• setDragImage ()

Sie haben Zugriff auf das DataTransfer – Objekt in den dragstart und drop – Ereignisobjekten. Hier ist ein Beispiel dragstart Listener-Funktion, die die effectsAllowed Eigenschaft auf dem DataTransfer Objekt setzt:

Die effectsAllowed Eigenschaft wird von den Browsern verwendet, um den Mauszeiger zu ändern, um anzuzeigen, welche Art von Aktion beim Ziehen und Ablegen eines Elements ausgeführt wird., Normalerweise ändert sich der Mauszeiger, wenn sich das gezogene Element über einem Drop-Ziel befindet. Nicht vorher. Gültige Werte für “ effectsAllowed Eigenschaft:

• keine
• copy
• move
• copyMove
• link
• linkMove
• copyLink
• alle
• nicht initialisierte

dropEffect soll der Benutzer (über die cursor -) was passiert, wenn der Mauszeiger über ein drop-Ziel, aber zu diesem Zeitpunkt (feb. 2014) die Browser scheinen, dies zu ignorieren., Gültige Werte für die Eigenschaft dropEffect sind:

• none
• copy
• link
• move

Mit der Funktion setDragImage(image, x, y) kann das vom Browser beim Ziehen eines Elements angezeigte Bild festgelegt werden. Standardmäßig zeigt der Browser eine halbtransparente Kopie des ursprünglichen Elements an, aber wenn Sie ein anderes Bild möchten, können Sie mit dieser Funktion ein anderes Bild festlegen. Mit den Eigenschaften x und y können bei der Anzeige Standortversätze für das Bild festgelegt werden., Standardmäßig befindet sich die obere linke Ecke des Drag-Bildes an der Spitze des Mauszeigers. Durch Festlegen verschiedenerx undy Eigenschaften können Sie dies ändern. Sie können entweder positive oder negative x und y Offsets verwenden.

Hier ist ein Codebeispiel, das zeigt, wie Sie ein Drag-Image innerhalb der dragStart() Ereignis-Listener-Funktion festlegen:

Hier ist ein Beispiel, mit dem Sie mit den verschiedenen Einstellungen des DataTransfer – Objekts spielen können., Versuchen Sie, die effectsAllowed zu ändern und ziehen Sie das Bild und sehen Sie, was passiert, wenn Sie das HTML5-Logo über das Drop-Ziel div nach unten ziehen.

Dateien in den Browser ziehen

Es ist möglich, Dateien aus dem Dateisystem in den Browser zu ziehen und den Namen und Inhalt der gezogenen Dateien aus JavaScript zu lesen. Sie tun dies über die HTML5-Datei-API., Hier ist ein Drop target Listener, der den Dateinamen der gezogenen Datei erkennt:

var droptarget2 = document.getElementById("droptarget2");droptarget2.addEventListener("drop" , drop , false);function drop(event) { // Files - array of dragged files. var files = event.dataTransfer.files; for(var i= 0; i 
 Notice how the 
 function does not call the 
 function, but instead accesses the 
 property of the 
. The 
 property contains a list of the files that were dragged into the browser. To learn how to read these files, consult the HTML5 File API (I will write about it soon).
 You can read more about how to access the dragged files in my HTML5 file API tutorial.