HTML5-Drag-and-Drop-Beispiele (Drag-and-Drop) erklärt-H5-Tutorial-php.cn

HTML5-Drag-and-Drop-Beispiele (Drag-and-Drop) erklärt

零下一度

Freigeben： 2017-05-15 10:45:23

Original

1539 Leute haben es durchsucht

Drag and Drop sind Teil des HTML5-Standards.

Drag and Drop

Drag and Drop ist eine häufige Funktion, bei der Sie ein Objekt greifen und es später an eine andere Stelle ziehen.

In HTML5 gehört Drag & Drop zum Standard und jedes Element kann per Drag & Drop verschoben werden.

Browser-Unterstützung

Internet Explorer 9+, Firefox, Opera, Chrome und Safari unterstützen das Ziehen.

Hinweis: Safari 5.1.2 unterstützt kein Ziehen.

HTML5-Drag-and-Drop-Beispiel

Das folgende Beispiel ist ein einfaches Drag-and-Drop-Beispiel:

<!DOCTYPE HTML>
<html>
<head>
<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>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>

Nach dem Login kopieren

Es sieht vielleicht etwas kompliziert aus, aber wir können die verschiedenen Teile des Drag-and-Drop-Ereignisses separat untersuchen.

Legen Sie das Element als ziehbar fest

Um das Element ziehbar zu machen, setzen Sie zunächst das Attribut „draggable“ auf „true“:

<img draggable="true">

Nach dem Login kopieren

Was gezogen werden soll – ondragstart und setData ()

Geben Sie dann an, was passiert, wenn das Element gezogen wird.

Im obigen Beispiel ruft das Attribut ondragstart eine Funktion, drag(event), auf, die die zu ziehenden Daten angibt.

Die Methode dataTransfer.setData() legt den Datentyp und den Wert der gezogenen Daten fest:

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

Nach dem Login kopieren

[Verwandte Empfehlungen]

1 Besonders empfohlen: Download der Version „php Programmer Toolbox“ V0.1

Kostenloses h5-Online-Video-Tutorial

php.cn Original-HTML5-Video-Tutorial

Das obige ist der detaillierte Inhalt vonHTML5-Drag-and-Drop-Beispiele (Drag-and-Drop) erklärt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!