Javascript Drag Drop

Es gibt 2 Möglichkeiten Elemente per Drag and Drop zu verschieben.

1. Die HTML Elemente mit der CSS Eigenschaft position:absolute auszuzeichnen und die Position per Mausposition zu bestimmt.
2. Das HTML Attribut draggable="true" wird eingesetzt. Damit ist ein Element zwar verschiebbar, aber man kann es noch nicht ablegen. Javascript bietet hier einige Events, Methoden und Eigenschaften.

Drag per Mausposition und position absolute

Hier 3 Beispiele, näheres dazu im Quelltext

1. Beispiel 1
2. Beispiel 2
3. Beispiel 3

Das dritte Beispiel baut auf dem zweiten Beispiel auf. In beiden Fällen wird die Verschiebe Funktion dem document zugewiesen. Im zweiten Beispiel gibt es nur ein Objekt, das verschoben werden kann. Im dritten Beispiel wird das angeklickte Objekt in einer Variablen currentObj gespeichert.

Javascript und HTML draggable="true"

siehe hier SelfHTML Wiki

Beispiel

drag

Bilder, Anker, und markierter Text sind in HTML5 ziehbar aber man kann sie nicht ohne weiteres irgendwo ablegen. Mit dem HTML Attribut draggable="true" kann man jedes Element ziehbar machen und jedes Element auch unziehbar machen durch draggable="false".

2022 wird das auf dem Android und iOS noch nicht unterstützt

dragstart / Event

Um eine drag & Drop Funktionalität zu erreichen ist es nötig per Javascript weitere Events hinzuzufügen.

Das dragstart Event wird ausgelöst, sobald man ein Element zieht. Währenddessen werden einem dataTransfer Objekt verschiedene Informationen zugewiesen und dort gespeichert. Es lässt sich beispielsweise übermitteln welche ID das gezogene Element hat:

An anderer Stelle (beispielsweise beim drop) kann man diese Information abrufen:

drop / Zielelement

Damit man ein Element auch auf einem Zielelement ablegen kann, muss dieses mit Javascript ermöglicht werden.

contenteditable / Attribut

Das Zielelement bekommt das HTML Attribut contenteditable="true"
Die Elemente input, textarea benötigen das Attribut nicht.

dragover / Event

Man weist dem Zielelement ein dragover-Event. zu. Das Standardverhalten des Browser beim dragover-Event ist, das Ablegen zu verhindern. Dieses Standardverhalten wird verhindert durch evt.preventDefault(); Somit wird das Ablegen auf dem Element ermöglicht.

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

drop /Event

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData('text');
    ev.target.appendChild(document.getElementById(data));
}

<div id="ziel" contenteditable="true"></div>
<img id="drag1" src="img/teil1.png" alt="anlasser" draggable="true" >
<img id="drag2" src="img/teil2.png" alt="pleuelstange" draggable="true">

Javascript

let ziel = document.getElementById("ziel");
let drag1 = document.getElementById("drag1");
let drag2 = document.getElementById("drag2");

ziel.addEventListener("dragover", allowDrop);
ziel.addEventListener("drop", drop);
drag1.addEventListener("dragstart", drag);
drag2.addEventListener("dragstart", drag);


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

function drag(evt) {
    evt.dataTransfer.setData('text', evt.target.id);
}

function drop(evt) {
    evt.preventDefault();
    var data = evt.dataTransfer.getData('text');
    evt.target.appendChild(document.getElementById(data));
}

        [draggable=true] {
            cursor: move;
        }
        
        [draggable=false] {
            cursor: not-allowed;
        }
        
        #ziel {
            background-image: url(img/eimer.png);
            background-repeat: no-repeat;
            width: 224px;
            height: 246px;
        }

Javascript Tipps