suchen

Heim >Web-Frontend >H5-Tutorial >HTML5-Drag-and-Drop-Beispiele (Drag-and-Drop) erklärt

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

零下一度
零下一度Original
2017-05-15 10:45:231554Durchsuche

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>

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">

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);
}

[Verwandte Empfehlungen]

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

2.

Kostenloses h5-Online-Video-Tutorial

3.

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML5-Inline-SVG-Tutorial und Unterschiede zu CanvasNächster Artikel：HTML5-Inline-SVG-Tutorial und Unterschiede zu Canvas

In Verbindung stehende Artikel

Mehr sehen