HTML - Drag and Drop

Web-Programmierung

08.09.2015 - Florian Bauer

Kontakt: bauerflorian95@gmail.com

Drag and Drop Funktionen (JS):

function allowDrop(event) {
    event.preventDefault();
}

function drag(event) {
    event.dataTransfer.setData("image", event.target.id);
}

function drop(ev) {
    event.preventDefault();
    var data = event.dataTransfer.getData("image");
    event.target.appendChild(document.getElementById(data));
}
        

Erstellen von ziehbaren Objekten (z.B. image, text...)

 draggable="true" ondragstart="drag(event)"

Erstellen von Ablageflächen (z.B. div, image...)

 ondrop="drop(event)" ondragover="allowDrop(event)"

Daten Transfer und Kontrolle

Während des Drag and Drop-Vorgangs werden die Daten des gezogenen Objektes dem Drag zugeordnet! Das funktioniert mit den Drag Events.

Schritt für Schritt - Drag Events

• dragstart: fired when start to drag an element
• dragenter: fired when a dragged element enters a valid drop target
• dragover: fired while a dragged element is above a valid drop target
• dragleave: fired when a dragged element leaves a valid drop target
• drag: fired while an element is being dragged
• drop: fired when an element is dropped on a valid drop target
• dragend: fired when a drag operation is being ended

Drag and Drop - Beispiel

Ziehbare Objekte:

"Draggable" Text

Browserkompatibilität

Quellen:

• developer.mozilla.org
• www.w3schools.com
• www.html5rocks.com
• wiki.selfhtml.org

Vielen Dank fürs Zuhören!