suchen

Heim  >  Artikel  >  Web-Frontend  >  HTML5 Drag & Drop (Drag & Drop) ausführliche Erklärung und Beispiele

HTML5 Drag & Drop (Drag & Drop) ausführliche Erklärung und Beispiele

高洛峰
高洛峰Original
2017-02-09 15:09:551784Durchsuche

Einführung

Drag-and-Drop ist eine gängige Funktion, bei der Sie ein Objekt greifen und es dann an eine andere Stelle ziehen.

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

Klicken Sie zuerst auf ein kleines Beispiel: Führen Sie JavaScript aus, wenn der Benutzer mit dem Ziehen des

-Elements beginnt

<p draggable="true" ondragstart="myFunction(event)">拖动我!</p>

Tipp: Links und Bilder sind standardmäßig ziehbar und erfordern kein Ziehen Attribut .

Definition und Verwendung

löst die folgenden Ereignisse während des Drag-and-Drop-Vorgangs aus:

Lösen Sie das Ereignis auf dem Drag-Ziel (Quellelement) aus:

ondragstart – wird ausgelöst, wenn der Benutzer mit dem Ziehen des Elements beginnt

ondrag – wird ausgelöst, wenn das Element gezogen wird

ondragend – wird ausgelöst, wenn der Benutzer mit dem Ziehen des Elements fertig ist

wird ausgelöst, wenn das Ziel wird freigegeben:

ondragenter – Dieses Ereignis wird ausgelöst, wenn das mit der Maus gezogene Objekt in den Geltungsbereich seines Containers gelangt

ondragover – Wenn ein gezogenes Objekt in den Geltungsbereich eines anderen gezogen wird Container des Objekts Dieses Ereignis auslösen

ondragleave – Dieses Ereignis wird ausgelöst, wenn das mit der Maus gezogene Objekt den Bereich seines Containers verlässt

ondrop – Dieses Ereignis wird ausgelöst, wenn die Maustaste währenddessen losgelassen wird ein Ziehvorgang

Browser-Unterstützung

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

Hinweis: Safari 5.1.2 unterstützt das Ziehen nicht; beim Ziehen eines Elements wird das Ondragover-Ereignis alle 350 Millisekunden ausgelöst.

Beispiel

Veröffentlichen Sie zuerst den Code und erklären Sie ihn dann einzeln: 

<!DOCTYPE html>
<html>
<head>
<title>HTML5拖拽</title>
<meta charset="utf-8">
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<p>拖动img_w3slogo.gif图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="images/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" width="300" height="56">

<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>
</body>
</html>

Der Seiteneffekt vor dem Ziehen ist:

HTML5 拖放（Drag 和 Drop）详解与实例

Lassen Sie uns die Bedeutung des obigen Codes separat analysieren.

Stellen Sie das Element so ein, dass es ziehbar ist

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( )

Anschließend geben Sie 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);
}

In diesem Beispiel ist der Datentyp „Text“ und der Wert gilt für die ziehbaren Daten Element-ID("drag1").

Wo platziert werden – ondragover

Das ondragover-Ereignis gibt an, wo die gezogenen Daten platziert werden sollen.

Standardmäßig können Daten/Elemente nicht in anderen Elementen platziert werden. Wenn wir die Platzierung zulassen müssen, müssen wir die Standardbehandlung des Elements verhindern.

Dies geschieht durch Aufrufen der event.preventDefault()-Methode des ondragover-Ereignisses: 

event.preventDefault()

für Platzierung - ondrop

Wenn die gezogenen Daten platziert werden, wird die Drop-Ereignis wird eintreten.

Im obigen Beispiel ruft das 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:

Rufen Sie präventDefault() auf, um die Browser-Standardeinstellung zu vermeiden Verarbeitung von Daten (das Standardverhalten des Drop-Ereignisses besteht darin, es als Link zu öffnen)

Rufen Sie die gezogenen Daten über die Methode dataTransfer.getData("Text") ab. Diese Methode gibt jeden Datensatz in den gleichen Typ wie in der setData()-Methode zurück.

Die gezogenen Daten sind die ID des gezogenen Elements ("drag1")

Das gezogene Element an das Platzierungselement (Zielelement) anhängen

Das Ergebnis der Implementierung ist wie in der Abbildung gezeigt:

HTML5 拖放（Drag 和 Drop）详解与实例

DataTransfer-Objekt

Während des Ziehvorgangs können wir das DataTransfer-Objekt verwenden, um Daten zu übertragen, sodass die Daten übertragen werden können übertragen, wenn der Ziehvorgang endet. Führen Sie andere Vorgänge aus.

Objekteigenschaften:

dropEffect: Legt das Drag-and-Drop-Verhalten fest, das auf dem Drag-and-Drop-Ziel auftreten darf, oder gibt es zurück. Wenn das hier festgelegte Drag-and-Drop-Verhalten nicht mehr zu den mehreren Drag-and-Drop-Verhaltensweisen gehört, die durch die Eigenschaft effectAllowed festgelegt wurden, schlägt der Drag-and-Drop-Vorgang fehl. Der Attributwert darf nur einer der vier Werte „null“, „copy“, „link“ und „move“ sein.

effectAllowed: Legt das zulässige Ziehverhalten für das gezogene Element fest oder gibt es zurück. Die Eigenschaftswerte können auf „none“, „copy“, „copyLink“, „copyMove“, „link“, „linkMove“, „move“, „all“ und „uninitialized“ gesetzt werden.

items: Diese Eigenschaft gibt das DataTransferItems-Objekt zurück, das die Drag-Daten darstellt.

types: Dieses Attribut gibt ein DOMStringList-Objekt zurück, das alle in dataTransfer gespeicherten Datentypen enthält.

Objektmethode:

setData(format,data): Weisen Sie dem dataTransfer-Objekt Daten im angegebenen Format zu. Der Parameter format definiert das Format der Daten, also den Datentyp. und data sind die zuzuweisenden Daten.

getData(format): Daten im angegebenen Format aus dem dataTransfer-Objekt abrufen.

clearData([format]): Daten im angegebenen Format aus dem dataTransfer-Objekt löschen. Wenn nicht angegeben, werden alle Daten im Objekt gelöscht.

addElement(element): Fügen Sie ein benutzerdefiniertes Symbol hinzu

setDragImage(element,x,y):设置拖放操作的自定义图标。其中element设置自定义图标，x设置图标与鼠标在水平方向上的距离，y设置图标与鼠标在垂直方向上的距离。

Identify what is draggable

function dragstart_handler(ev) {
 console.log("dragStart");
 // Add the target element's id to the data transfer object
 ev.dataTransfer.setData("text/plain", ev.target.id);
}

<body>
 <p id="p1" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p>
</body>

Define the drag's data

function dragstart_handler(ev) {
  // Add the drag data
  ev.dataTransfer.setData("text/plain", ev.target.id);
  ev.dataTransfer.setData("text/html", "<p>Example paragraph</p>");
  ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org");
}

Define the drag image

function dragstart_handler(ev) {
  // Create an image and then use it for the drag image.
  // NOTE: change "example.gif" to an existing image or the image 
  // will not be created and the default drag image will be used.
  var img = new Image(); 
  img.src = 'example.gif'; 
  ev.dataTransfer.setDragImage(img, 10, 10);
}

Define the drag effect

function dragstart_handler(ev) {  // Set the drag effect to copy
  ev.dataTransfer.dropEffect = "copy";
}

Define a drop zone

function dragover_handler(ev) {
 ev.preventDefault();
 // Set the dropEffect to move
 ev.dataTransfer.dropEffect = "move"
}
function drop_handler(ev) {
 ev.preventDefault();
 // Get the id of the target and add the moved element to the target's DOM
 var data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));
}
<body>
 <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
</body>

火狐浏览器拖拽问题

但是进行到这儿在火狐浏览器中发现一个问题：

html5的拖拽，用了preventDefault防止弹出新页面，但在火狐下不管用？

解决办法：

document.body.ondrop = function (event) {
    event.preventDefault();
    event.stopPropagation();
}　

更多HTML5 拖放（Drag 和 Drop）详解与实例相关文章请关注PHP中文网！

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 fügt dem Eingabefeld eine Spracheingabefunktion hinzuNächster Artikel：HTML5 fügt dem Eingabefeld eine Spracheingabefunktion hinzu

In Verbindung stehende Artikel

Mehr sehen