Ziehen und Ablegen in HTML - Beispiel für die Ausführung von Drag & Drop in HTML

• Einführung in Drag & Drop in HTML
• 
Drag and Drop Demo
function allowDrop(ev) (
ev.preventDefault();
)
function dragStart(ev) (
ev.dataTransfer.setData("text", ev.target.id);
)
function dragDrop(ev) (
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
)

#box (
margin: auto;
width: 30%;
width: 21%;
height:150px;
border: 2px solid blue;
padding: 2px;
)
#square1, #square2, #square3 (
float: left;
margin: 5px;
padding: 10px;
)
#square1 (
width: 30px;
height: 30px;
background-color: #BEA7CC;
)
#square2 (
width: 60px;
height: 60px;
background-color: #B5D5F5;
)
#square3 (
width: 90px;
height: 90px;
background-color:#F5B5C5 ;
)
h2 (
font-size:20px;
font-weight:bold;
text-align:center;
)

HTML DRAG AND DROP DEMO





Einführung in Drag & Drop in HTML

Drag & Drop ist jetzt eine der neuesten Funktionen in HTML. Drag & Drop ist ein Prozess, der gestartet wird, wenn der Benutzer ein ziehbares Element auswählt und dieses Element in der ablegbaren Komponente platziert und an der angegebenen Position platziert. Es verwendet das DOM-Ereignismodell (Document Object Model) sowie einige Ziehereignisse, die von Mausereignissen stammen. Es ist die leistungsstärkste Benutzeroberfläche, über die Elemente mit der Maus kopiert, aufgezeichnet und gelöscht werden können. In der neuesten HTML-Version funktioniert die Drag & Drop-Funktion für die neuesten Ereignisse wie dragstart und dragend, so wie viele andere Ereignisse verwendet werden sollen.

Ereignisse für Drag & Drop

In der neuesten Drag & Drop-Funktion (dnd) sind mehrere Ereignisse enthalten. Sehen Sie sich eines nach dem anderen wie folgt an:

Sehen wir uns einige Datenattribute an, bei denen der Drag & Drop-Vorgang stattfinden wird:

1. dataTransfer.dropEffect (= value): Mit diesem Attribut wird angezeigt, welche Operation gerade ausgeführt wird. Man kann es so einstellen, dass es die bereits ausgewählte Operation ersetzt. Die darin enthaltenen Werte mögen eine Kopie, einen Link, keine oder eine Bewegung.

2. dataTransfer.effectAllowed (= Wert): Welche Operationen zulässig sind, die über dieses Attribut zurückgegeben werden. Sie können auch festlegen, dass bereits ausgewählte Vorgänge geändert werden.

3. dataTransfer.files: Mit diesem Datenattribut wird die Dateiliste der zu ziehenden Dateien abgerufen.

4. dataTransfer.addElement (Element): Es wird verwendet, um das bereits vorhandene Element in eine Liste anderer Elemente einzufügen, die zum Rendern des Drag-Feedbacks nützlich sind.

5. dataTransfer.setDragImage (Element, x, y): Dieses Attribut entspricht in etwa dem oben angegebenen Attribut, um das Drag-Feedback zu aktualisieren und bereits vorhandenes Feedback zu ändern

6. dataTransfer.clearData ((format)): Es hilft dem Benutzer, Daten aus dem bereits definierten Format zu entfernen. Wenn der Benutzer das Argument weglässt, entfernt die IT alle Daten.

7. dataTransfer.setData (Format, Daten): Dies ist eines der gängigen Attribute, mit denen bestimmte Daten hinzugefügt werden.

8. data = dataTransfer.getData (Format): Dieses Attribut wird beim Ziehen und Ziehen zum Extrahieren der angegebenen Daten verwendet. Falls es nicht die gleichen Daten gibt, wird zum leeren String zurückgekehrt

Syntax von Drag & Drop in HTML

Hier sind einige Schritte zum Definieren der Syntax für Drag & Drop:

Wählen Sie das Objekt aus, das gezogen werden soll: Setzen Sie das Attribut auf true.

Beginnen Sie mit dem Ziehen des Objekts:

function dragStart(ev)()

Lass das Objekt fallen:

function dragDrop(ev)()

Beispiele für Drag & Drop in HTML

Das folgende Beispiel zeigt, wie genau die Drag & Drop-Operation in HTML ausgeführt wird:

Beispiel 1

Code:


Drag and Drop Demo
function allowDrop(ev) (
ev.preventDefault();
)
function dragStart(ev) (
ev.dataTransfer.setData("text", ev.target.id);
)
function dragDrop(ev) (
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
)

#box (
margin: auto;
width: 30%;
width: 21%;
height:150px;
border: 2px solid blue;
padding: 2px;
)
#square1, #square2, #square3 (
float: left;
margin: 5px;
padding: 10px;
)
#square1 (
width: 30px;
height: 30px;
background-color: #BEA7CC;
)
#square2 (
width: 60px;
height: 60px;
background-color: #B5D5F5;
)
#square3 (
width: 90px;
height: 90px;
background-color:#F5B5C5 ;
)
h2 (
font-size:20px;
font-weight:bold;
text-align:center;
)

HTML DRAG AND DROP DEMO






Drag and Drop Demo
function allowDrop(ev) (
ev.preventDefault();
)
function dragStart(ev) (
ev.dataTransfer.setData("text", ev.target.id);
)
function dragDrop(ev) (
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
)

#box (
margin: auto;
width: 30%;
width: 21%;
height:150px;
border: 2px solid blue;
padding: 2px;
)
#square1, #square2, #square3 (
float: left;
margin: 5px;
padding: 10px;
)
#square1 (
width: 30px;
height: 30px;
background-color: #BEA7CC;
)
#square2 (
width: 60px;
height: 60px;
background-color: #B5D5F5;
)
#square3 (
width: 90px;
height: 90px;
background-color:#F5B5C5 ;
)
h2 (
font-size:20px;
font-weight:bold;
text-align:center;
)

HTML DRAG AND DROP DEMO





Ausgabe: Die Ausgabe der Drag & Drop-Option erfolgt wie folgt:

Nach der Ausführung des Drag & Drop-Vorgangs erfolgt die Ausgabe wie folgt:

Beispiel # 2

Hier sehen wir ein weiteres Beispiel, in dem wir das Bild von einem Ort an einen anderen angegebenen Ort verschieben, wie im folgenden Code gezeigt:

Code:



function allowDrop(ev) (
ev.preventDefault();
)
function dragStart(ev) (
ev.dataTransfer.setData("text", ev.target.id);
)
function dragDrop(ev) (
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
)

.divfirst (
width: 250px;
height: 150px;
padding: 10px;
border: 1px solid black;
background-color: #F5F5F5;
)
p (
font-size:20px;
font-weight:bold;
)



Image Drag & Drop Demo