English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Drag and drop is a common feature, which means dragging an object and dropping it at another location in HTML5 In HTML, drag and drop is part of the standard, and any element can be dragged and dropped.
Drag and drop (Drag and Drop) is part of HTML5 is part of the standard.
Drag oldtoolbag.com icon drag into the rectangular box.
Drag and drop is a common feature, which means dragging an object and dropping it at another location.
In HTML5 In HTML, drag and drop is part of the standard, and any element can be dragged and dropped.
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support drag and drop.
Note:Safari 5.1.2Not supported for dragging.
The following example is a simple drag and drop example:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style type="text/css">
#div1 {width:350px; height:70px; padding:10px; border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
}
ev.target.appendChild(document.getElementById(data));
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
ev.target.appendChild(document.getElementById(data));
function drop(ev)
{
}
var data=ev.dataTransfer.getData("Text");
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
</script>
</head>
<body>
<p>Ziehen Sie oldtoolbag.com - Bild in ein Rechteck ziehen:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1"src="/static/images/logo-n.png" draggable="true" ondragstart="drag(event)" width="336"height="69">
</body>
</html>Testen Sie heraus, ob ‹/›Es mag etwas kompliziert aussehen, aber wir können die verschiedenen Teile der Drag-and-Drop-Ereignisse einzeln untersuchen.
Zunächst, um ein Element beweglich zu machen, setzen Sie das draggable-Attribut auf true:
<img draggable="true">
Dann wird festgelegt, was passiert, wenn das Element bewegt wird.
In diesem Beispiel ruft die ondragstart-Attribut eine Funktion auf, drag(event), die die gezogenen Daten definiert.
Die Methode dataTransfer.setData() setzt den Datentyp und den Wert der gezogenen Daten:
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
ev.target.appendChild(document.getElementById(data));
Text ist ein DOMString, der den Typ der zu einem drag-object hinzuzufügenden gezogenen Daten darstellt. Der Wert ist die id des beweglichen Elements ("drag1")}
Das ondragover-Ereignis legt fest, wo die gezogenen Daten platziert werden.
Standardmäßig können Daten/Ein Element wird in ein anderes Element gelegt. Wenn eine Platzierung erlaubt werden soll, müssen wir die Standardbehandlung des Elements verhindern.
Dies wird durch das Aufrufen der Methode event.preventDefault() des ondragover-Ereignisses erreicht:
event.preventDefault()
Wenn Daten in den Container gezogen werden, wird das drop-Ereignis ausgelöst.
In diesem Beispiel ruft die ondrop-Attribut eine Funktion auf, drop(event):
function drop(ev)
{
}
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
Codeerklärung:
Mit dem Methoden preventDefault() wird das Standardverhalten des Browsers bei Datenverarbeitung verhindert (das Standardverhalten des drop-Ereignisses ist, Daten als Link zu öffnen)
Die verschobenen Daten sind die id des verschobenen Elements ("drag1)
Fügen Sie das verschobene Element dem platzierten Element (Ziellement) hinzu
HTML5Hin- und herschieben von Bildern
Wie man ein Bild zwischen zwei <div>-Elementen ziehen und ablegen kann.