HTML5 Drag and Drop

Zurück: HTML5 Inline - SVG

Next: HTML5 geopositioning

Drag & Drop (Ziehen und Ablegen) ist Teil der HTML5-Standard.

W3cschool Symbol und es auf das Rechteck ziehen.

Drag and Drop

Drag & Drop ist ein gemeinsames Merkmal, das auf einem anderen Ort nach dem Objekt zu kriechen ist.

In HTML5, Drag & Drop ist ein Standard-Bestandteil jedes Element ziehen können.

Browser-Unterstützung

Internet Explorer 9+, Firefox, Opera, Chrome und Safari unterstützt Drag.

Hinweis: Safari 5.1.2 nicht ziehen nicht unterstützt.

HTML5 Drag and Drop Beispiele

Das folgende Beispiel ist eine einfache Drag & Drop-Beispiel:

Beispiele

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
    ev.preventDefault();
}

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>拖动 W3CSchool.cc 图片到矩形框中:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

Versuchen »

Es mag ein wenig kompliziert erscheinen, aber wir waren in der Lage verschiedene Teile des Drag zu studieren und Ereignisse fallen.

Element wird fallen

Erstens, um das Element ziehbar zu machen, setzen Sie das Attribut draggable auf true:

Ziehen Was - onDragStart und setData ()

Dann, wenn das Element Bestimmung gezogen wird, was passieren wird.

In dem obigen Beispiel ruft onDragStart Attribut eine Funktion, Drag (Ereignis), die die gezogenen Daten definiert.

dataTransfer.setData () Methode, um den Datentyp und Wert geschleppt Daten einzustellen:

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

In diesem Beispiel ist der Datentyp "Text" ist, ist der Wert ziehbare Element id ( "drag1").

Wo setzen - OnDragOver

OnDragOver angegebene Ereignis, wo die Daten gespeichert werden hineingezogen zu werden.

Standardmäßig können Sie die Daten nicht / Elemente in andere Elemente platzieren. Wenn Sie einrichten müssen ermöglicht es Ihnen, zu platzieren, müssen wir die Standardbehandlung des Elements zu verhindern.

Tun Sie dies durch den Aufruf OnDragOver Ereignis Event.preventDefault () -Methode:

event.preventDefault()

Platziert werden - ondrop

Wenn gezogenen Daten platziert, Drop-Ereignis eintritt.

In dem obigen Beispiel ondrop Attribut eine Funktion aufruft, fallen (event):

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

Code Erläuterung:

Rufen Sie die prevent (), um den Standard-Browser für die Datenverarbeitung zu verhindern (Drop-Ereignis das Standardverhalten ist ein Link zu öffnen)
Holen Sie gezogenen Daten durch dataTransfer.setData ( "Text") Methode. Diese Methode wird die gleiche Datenmenge von jeder Art in setData () -Methode zurück.
Die Daten werden abgeschleppt Element-ID abgeschleppt ( "drag1")
Das gezogene Element an Ort Elemente (Zielelement) angehängt in

Weitere Beispiele

Ziehen Sie das Bild hin und her
Wie zu ziehen und Bilder zwischen zwei <div> Elemente fallen.