Heim > Artikel > Web-Frontend > Beispielerklärung der HTML5-DragEvent-Schnittstelle

Beispielerklärung der HTML5-DragEvent-Schnittstelle

零下一度Original: 2017-05-26 15:41:482056Durchsuche

DragEvent ist eine DOM-Ereignisschnittstelle, die die Interaktion zwischen Drag und Drop darstellt. Der Benutzer beginnt mit dem Ziehen, indem er ein Zeigegerät (z. B. eine Maus) auf der Oberfläche des Ziels platziert und dann den Zeiger an eine neue Position (z. B. ein anderes DOM-Element) zieht. Die Anwendung löst Drag-and-Drop-Interaktionen automatisch auf. Die DragEvent-Schnittstelle erbt Eigenschaften von mouseEvent und Event.

Ereignistypen

DragEvent ist kein einzelnes Ereignis, es enthält mehrere Ereignisse. Diese Ereignisse sind: Drag, Dragstart, Dragenter, Dragend, Dragover, Dragexit, Dragleave, Drop.

Ziehen: Dieses Ereignis wird während des Ziehvorgangs des Elements wiederholt ausgelöst, einmal alle 100 Millisekunden. Das Zielelement dieses Ereignisses ist das gezogene Element. Dieses Ereignis kann aufsteigen und das Standardverhalten aufheben.

dragstart: Dieses Ereignis wird ausgelöst, wenn der Benutzer mit dem Ziehen beginnt. Das Zielelement dieses Ereignisses ist das Element, das gezogen wird. Unter diesen Ereignissen wird das Dragstart-Ereignis zuerst ausgelöst. Dieses Ereignis kann zu einer Blase führen und das Standardverhalten aufheben.

dragenter: Dieses Ereignis wird ausgelöst, wenn das gezogene Element in ein zulässiges Drop-Ziel gelangt. Das Zielelement dieses Ereignisses ist das abwerfbare Ziel. Dieses Ereignis kann zu einer Blase führen und das Standardverhalten aufheben.

Dragover: Dieses Ereignis wird alle 100 Millisekunden wiederholt ausgelöst, wenn sich das gezogene Element innerhalb des Drop-Zielbereichs bewegt. Das Zielelement dieses Ereignisses ist das abwerfbare Ziel. Dieses Ereignis kann zu einer Blase führen und das Standardverhalten aufheben.

dragend: Dieses Ereignis wird ausgelöst, wenn das Ziehen endet. Das Zielelement dieses Ereignisses ist das gezogene Element. Zu den letzten dieser Ereignisse zählen die Dragend-Brände. Dieses Ereignis kann sprudeln und das Standardverhalten nicht aufheben.

dragleave: Dieses Ereignis wird ausgelöst, wenn das gezogene Element das zulässige Drop-Ziel verlässt. Das Zielelement dieses Ereignisses ist das abwerfbare Ziel. Dieses Ereignis kann sprudeln und das Standardverhalten nicht aufheben.

dragexit: Dieses Ereignis wird ausgelöst, wenn ein dropable-Element nicht mehr das nächstgelegene Drop-Ziel des Drag-Vorgangs ist. Das Zielelement dieses Ereignisses ist das löschbare Element. Dieses Ereignis kann sprudeln und hebt das Standardverhalten nicht auf.

Drop: Dieses Ereignis wird ausgelöst, wenn das Zeigergerät des gezogenen Elements auf dem Drop-Ziel losgelassen wird. Das Zielelement dieses Ereignisses ist das Drop-Ziel. Das Drop-Ereignis wird vor dem Dragend-Ereignis ausgelöst. Dieses Ereignis kann zu einer Blase führen und das Standardverhalten aufheben.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>test target</title>
    <style type="text/css">
        #drag{
            width:200px;
            height:200px;
            background-color: aqua;
        }
        .drop{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <p id="drag" draggable="true" ondragstart="event.dataTransfer.setData(&#39;text/plain&#39;,&#39;dddd&#39;)">
        我可以拖动
    </p>
    <img src="test.jpg" id="img">
    <p class="drop"></p>
    <script type="text/javascript">
        document.addEventListener(&#39;drag&#39;,function(event){
            event.target.style.backgroundColor = &#39;black&#39;;
        },false);
        document.addEventListener(&#39;dragstart&#39;,function(event){
            event.target.style.backgroundColor = &#39;red&#39;;

        },false);
        document.addEventListener(&#39;dragend&#39;,function(event){
            event.target.style.backgroundColor = &#39;yellow&#39;;
        },false);
        document.addEventListener(&#39;dragover&#39;,function(event){
            event.preventDefault();
            event.target.style.backgroundColor = &#39;blue&#39;;
        },false);
        document.addEventListener(&#39;dragenter&#39;,function(event){
            event.target.style.backgroundColor = &#39;green&#39;;
        },false);
        document.addEventListener(&#39;dragleave&#39;,function(event){
            event.target.style.backgroundColor = &#39;pink&#39;;
        },false);
        document.addEventListener(&#39;dragexit&#39;,function(event){
            event.target.style.backgroundColor = &#39;red&#39;
        },false);
        document.addEventListener(&#39;drop&#39;,function(event){
            event.preventDefault();
            event.target.style.backgroundColor = &#39;white&#39;;
            console.log(2);


        },false)
    </script>
</body>
</html>

Die Ereignisobjekte dieser Ereignisse enthalten die Methoden und Eigenschaften der Ereignisobjekte von Mausereignissen. Darüber hinaus gibt es ein dataTransfer-Attribut

, um das Element ziehbar zu machen

In HTML sind die einzigen ziehbaren Elemente standardmäßig Bild, Link und ausgewählter Text. Um andere Elemente ziehbar zu machen, müssen Sie die folgenden drei Dinge tun:

1. Legen Sie ein ziehbares Attribut für das Element fest und setzen Sie den Wert dieses Attributs auf true

2 Element Fügen Sie einen Dragstart-Ereignis-Listener hinzu

3. Legen Sie die Drag-Daten über event.DataTransfer.setData(type, value) im Dragstart-Ereignis-Listener fest.

<p draggable="true" ondragstart="event.dataTransfer.setData(&#39;text/plain&#39;, &#39;This text may be dragged&#39;)">
      This text <strong>may</strong> be dragged.
    </p>

Wenn das ziehbare Attribut deaktiviert oder auf „false“ gesetzt ist, kann dieses Element nicht gezogen werden. Das ziehbare Attribut kann für jede Eigenschaft festgelegt werden. Wenn ein Element auf ziehbar eingestellt ist, werden durch Klicken oder Ziehen mit der Maus auf das Element weder der Text noch andere Elemente im Element ausgewählt. Wenn der Benutzer mit dem Ziehen beginnt, wird das Dragstart-Ereignis ausgelöst. Im Dragstart-Ereignis können Sie die Drag-Daten über setData() angeben, das Bild-Feedback über setDragImage() angeben und den Drag-Effekt angeben, indem Sie das Attribut „effectAllowed“ und „dropEffect“ festlegen Attribut. Die Drag-Daten müssen angegeben werden, aber die Bildrückmeldung besagt, dass der Drag-Effekt nicht erforderlich ist

Drag-Daten

Die Drag-Daten enthalten zwei Teile von Informationen, nämlich den Datentyp und den Wert Der Datentyp ist String und der Datenwert liegt ebenfalls in Form eines Strings vor. Zu den Arten von Drag-and-Drop-Daten gehören: Text/Plain, Text/HTML, Bild/JPEG, Text/URI-Liste usw. Sie können den Typ auch anpassen.

Sie können die Methode setData() mehrmals aufrufen, um mehrere Drag-and-Drop-Daten festzulegen. Wie folgt:

var dt = event.dataTransfer;
dt.setData("application/x-bookmark",bookmarkString);
dt.setData(&#39;text/uri-list&#39;,&#39;www.baidu.com&#39;);
dt.setData(&#39;text/plain&#39;,&#39;drag data&#39;);

application/x-bookmark ist ein benutzerdefinierter Typ.

Wenn Sie mit dieser Methode einen neuen Datentyp festlegen, stehen die neuen Ziehdaten am Ende der Ziehdatenliste. Wenn Sie den vorhandenen Datentyp festlegen, werden die neuen Daten überschrieben alte Daten.

Der angegebene Typ von Drag-and-Drop-Daten kann über getData() abgerufen werden.

Der angegebene Typ von Drag-and-Drop-Daten kann über clearData() gelöscht werden.

Bild-Feedback

Bild-Feedback muss nicht eingestellt werden. Standardmäßig handelt es sich um ein durchscheinendes Bild, das vom Ziehziel generiert wird, und dieses Bild folgt der Mausbewegung während des Ziehens. Sie können das Bild-Feedback über die Methode setDragImage(image,xOffect,yOffect) anpassen.

setDragImage() akzeptiert drei Parameter. Der erste Parameter stellt die Referenz des Bildes auf dar, und der zweite und dritte Parameter stellen die Position der oberen linken Ecke des Bildes relativ zum dar Mauszeiger. Die Einheit ist Pixel

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>test target</title>
    <style type="text/css">
        #drag{
            width:200px;
            height:200px;
            background-color: aqua;
        }
        .drop{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <p id="drag" draggable="true" ondragstart="event.dataTransfer.setData(&#39;text/plain&#39;,&#39;dddd&#39;)">
        我可以拖动
    </p>
    <img src="test.jpg" id="img">
    <p class="drop"></p>
    <script type="text/javascript">
      
        document.addEventListener(&#39;dragstart&#39;,function(event){
            event.target.style.backgroundColor = &#39;red&#39;;
            event.dataTransfer.setDragImage(document.getElementById(&#39;img&#39;),30,30);

        },false);
       
    </script>
</body>
</html>

Drag-Effekt

Sie können den Drag-Effekt angeben, indem Sie effectAllowed und dropEffect

festlegen

事件对象的dataTransfer属性

dataTransfer属性是一个DataTransfer对象，在这个属性中保存了拖拽操作过程中的数据，它可能保存一个或者多个数据项。这个属性是只读的。

dataTransfer属性中的标准属性

1.dropEffect

得到当前drag and drop操作的类型，或者设置给当前drag and drop 设置新的类型。这个属性可能取值是none，copy，move，link。这属性会影响拖拽过程中的鼠标的显示形式。

2.effectAllowed

这个属性用于指定运行的拖拽操作效果，可选的值有none，all，copy，move，link，copyLink，copyMove，linkMove。默认情况这个值是all，如果要设置这个属性的值就要在dragstart的事件处理程序里进行设置。

3.files

包含了在data transfer中的所有可用的本地文件列表，如果被拖拽操作没有涉及文件，那么它是一个空列表。

4.items

是一个包含了所有拖拽数据的列表。它是一个DataTransferItemList对象。

5.types

它是一个字符串数组，这个数组中包含在dragstart事件处理程序中设置的拖拽事件的类型，如果拖拽操作不存在数据，那么他得到一个空数组。

DataTransfer属性的标准方法

1.clearData(type):移除给定类型相关的拖拽数据。接受一个可选的参数，如果这个参数是空或者没有指定，那么移除所以类型的数据，如果指定的类型不存在或者data transfer中不包含数据，那么这个方法不会产生什么影响。

2.getData(type):得到指定类型的拖拽数据。如果指定类型的数据不存在或者data transfer中不包含数据，得到一个空的字符串。

3.setData(type，value):设置给定类型的拖拽数据。接受两个参数，第一个参数是类型，第二个参数是指定类型的值。如果这个类型的值不存在，那么在类型列表的最后添加一个新的格式，如果已经存在的,那么在相同的位置存在的数据被替换.

4.setDragImage(image，xoffset，yoffset):接受三个参数，第一个参数是图片的引用，第二个和第三个参数是移动的图片的左上角相对鼠标的位置。

DataTransferList对象

通过dataTransfer.items得到的值就是DataTransferList对象。

DataTransferList对象的属性

1.length:得到拖拽数据的数量

DataTransferList对象的方法

1.add()：向拖拽数据列表中添加一个新的拖拽数据，添加成功后返回这个新的拖拽数据。当添加一个文件到拖拽数据列表中，这个方法只接受一个文件对象作为参数。当添加一个给定类型的字符串到拖拽数据列表中，这个方法接受两个参数，第一个参数是数据，第二个参数是类型。

2.remove(index):从拖拽数据列表中移除指定位置的拖拽数据。这个方法接受一个表示位置的参数，如果这个参数小于0或者大于拖拽数据列表的长度，拖拽数据列表不会发生改变。

3.clear():移除拖拽数据列表中所有的拖拽数据。不需要参数。

4.DataTransferItem(index):得到指定位置上的拖拽数据。接受一个表示位置的参数，这个方法简写形式是数组索引。

DataTransferItem对象

dataTransfer.items中的每一项都是DataTransferItem对象。

DataTransferItem对象的属性

1.kind：得到拖拽数据的键，可能的值有file和string

2.type：得到拖拽数据的类型，是MINE type

DataTransferItem对象的方法

1.getAsFile():返回拖拽数据的文件对象。如果拖拽数据不是文件则返回null

2.getAsString(function):调用回调函数，这个回调函数将拖拽数据项的字符串形式作为它的参数

拖拽文件

要使文件能够被拖放的一个重要步骤是定义一个放置区域。并且为放置区域添加drop，dragover和dragend事件处理程序。

当为一个元素添加drop事件的处理程序，及在dragover事件处理程序中取消浏览器的默认行为，那么这个元素就是放置区域。

另外，在drag和drop操作结束之后，应用程序应该移除拖拽数据（可能是一个或者多个文件），数据的清理通常在 dragend事件处理程序中。

<p id="drop_zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend = "dragend_handler(event)">
  <strong><Drag one or more files to this Drop Zone ...</strong>
</p>

例子一，访问文件名

function drop_handler(ev) {
  console.log("Drop");
  ev.preventDefault();
  // If dropped items aren&#39;t files, reject them
  var dt = ev.dataTransfer;
  if (dt.items) {
    // Use DataTransferItemList interface to access the file(s)
    for (var i=0; i < dt.items.length; i++) {
      if (dt.items[i].kind == "file") {
        var f = dt.items[i].getAsFile();
        console.log("... file[" + i + "].name = " + f.name);
      }
    }
  } else {
    // Use DataTransfer interface to access the file(s)
    for (var i=0; i < dt.files.length; i++) {
      console.log("... file[" + i + "].name = " + dt.files[i].name);
    }
  }
}

例子二，阻止浏览器默认行为

function dragover_handler(ev) {
  console.log("dragOver");
  // Prevent default select and drag behavior
  ev.preventDefault();
}

例子三，清除数据

function dragend_handler(ev) {
  console.log("dragEnd");
  // Remove all of the drag data
  var dt = ev.dataTransfer;
  if (dt.items) {
    // Use DataTransferItemList interface to remove the drag data
    for (var i = 0; i < dt.items.length; i++) {
      dt.items.remove(i);
    }
  } else {
    // Use DataTransfer interface to remove the drag data
    ev.dataTransfer.clearData();
  }
}

【相关推荐】

1. 免费h5在线视频教程

2.Verstehen Sie HTML5 in 20 Minuten und sehen Sie, welche neuen Funktionen H5 bietet.

3. Lernen Sie, wie Sie eine H5-Mikroszene implementieren

4. H5-Codebeispiel für die Erstellung einer Registrierungsseite

5. Der Unterschied zwischen H5 und traditionellem HTML

6 🎜>Bestanden Detaillierte Erläuterung von Beispielen für die H5-Implementierung der Kamerafunktion

Das obige ist der detaillierte Inhalt vonBeispielerklärung der HTML5-DragEvent-Schnittstelle. 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：Zusammenfassung der Tags in HTML5Nächster Artikel：Zusammenfassung der Tags in HTML5

In Verbindung stehende Artikel

Mehr sehen