Heim > Artikel > Web-Frontend > Ausführliche Erklärung von H5 Drag & Drop

Ausführliche Erklärung von H5 Drag & Drop

php中世界最好的语言Original: 2018-03-27 11:12:023205Durchsuche

Dieses Mal werde ich Ihnen eine detaillierte Erklärung zu H5 Drag & Drop geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung von H5 Drag & Drop? Hier sind praktische Fälle, schauen wir uns das an.

Einführung

Drag-and-Drop ist eine gängige 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.

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 Ja, es ist kein ziehbares Attribut erforderlich.

Definition und Verwendung

Die folgenden Ereignisse werden während des Drag-and-Drop-Vorgangs ausgelöst:

Ausgelöst beim Ziehen Zielereignis (Quellelement): 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, nachdem der Benutzer das Ziehen des Elements abgeschlossen hat.

Ereignis wird ausgelöst, wenn das Ziel losgelassen wird: ondragenter – wird ausgelöst, wenn das mit der Maus gezogene Objekt in seinen Containerbereich gelangt

ondragover – Dieses Ereignis wird ausgelöst, wenn ein gezogenes Objekt in den Bereich eines anderen Objektcontainers gezogen wird
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ährend eines Ziehvorgangs losgelassen wird

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>
#p1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<p>拖动img_w3slogo.gif图片到矩形框中:</p>
<p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>
<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:

Lassen Sie uns die Bedeutung des obigen Codes separat analysieren.

Legen Sie fest, dass das Element ziehbar ist

Um das Element ziehbar zu machen, setzen Sie zunächst das ziehbare Attribut 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);
}

In diesem Beispiel ist der Datentyp „Text“. und der Wert ist die ID des ziehbaren Elements („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 den Aufruf der Methode event.preventDefault() des ondragover-Ereignisses:

event.preventDefault()

für die Platzierung – ondrop

für die Platzierung Bei den gezogenen Daten tritt ein Drop-Ereignis auf.

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

Code-Erklärung:

Call präventDefault ( ), um die Standardverarbeitung von Daten durch den Browser zu vermeiden (das Standardverhalten des Drop-Ereignisses besteht darin, es als Link zu öffnen)
Rufen Sie die gezogenen Daten über dataTransfer.getData("Text") ab. Methode. 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“)
Hängen Sie das gezogene Element an das Platzierungselement (Zielelement) an ) Das in

erzielte Ergebnis ist wie in der Abbildung dargestellt:

dataTransfer对象

在拖曳操作的过程中，我们可以用过dataTransfer对象来传输数据，以便在拖曳操作结束的时候对数据进行其他的操作。

对象属性：

dropEffect:设置或返回拖放目标上允许发生的拖放行为。如果此处设置的拖放行为不再effectAllowed属性设置的多种拖放行为之内，拖放操作将会失败。该属性值只允许为“null”、“copy”、“link”和“move”四值之一。
effectAllowed:设置或返回被拖动元素允许发生的拖动行为。该属性值可设为“none”、“copy”、“copyLink”、“copyMove”、“link”、“linkMove”、“move”、“all”和“uninitialized”。
items:该属性返回DataTransferItems对象，该对象代表了拖动数据。
types:该属性返回一个DOMStringList对象，该对象包括了存入dataTransfer中数据的所有类型。

对象方法：

setData(format,data):将指定格式的数据赋值给dataTransfer对象，参数format定义数据的格式也就是数据的类型，data为待赋值的数据
getData(format):从dataTransfer对象中获取指定格式的数据，format代表数据格式，data为数据。
clearData([format]):从dataTransfer对象中删除指定格式的数据，参数可选，若不给出，则为删除对象中所有的数据。
addElement(element):添加自定义图标
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>
 <p id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</p>
</body>

火狐浏览器拖拽问题

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

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

解决办法：

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

或者对于上面的实例中，添加到ondrop方法里面也是可以的：

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

In Verbindung stehende Artikel

Mehr sehen