Beispielcode-Freigabe für natives js Drag & Drop

Dragable

Bilder, Links und Text in Webseiten können standardmäßig vom Browser gezogen werden, HTML5 stellt ein ziehbaresAttribut für alle HTML-Elemente bereit. Wenn der Wert dieses Attributs wahr ist, wird das Element als ziehbar angesehen >

Wenn Sie ein Bild oder einen Link ziehen, platzieren Sie die Maus auf dem Bild oder Link und halten Sie die Maustaste gedrückt, um es zu ziehen. Beim Ziehen von Text müssen Sie zuerst den Text auswählen und ihn dann wie folgt ziehen Der ausgewählte Text wird genau wie beim Ziehen des Bildes ausgelöst. Das Ereignis

Draged Element

wird beim Ziehen des Bildes nacheinander ausgelöst: Dragstart, Drag , Drag

End

-Ereignis Die Ziele dieser drei Ereignisse sind die gezogenen Elemente. Wenn die Maustaste drückt und beginnt, die Maus zu bewegen, wird Dragstart für das gezogene Element ausgelöst. Nachdem das Dragstart-Ereignis ausgelöst wurde, wird das Drag-Ereignis sofort ausgelöst, und das Drag-Ereignis wird weiterhin ausgelöst, während das Element gezogen wird. Wenn das Ziehen stoppt, wird Dragend ausgelöst, unabhängig davon, ob das Element auf einem gültigen Element platziert ist Platzierungsziel oder ein ungültiges Platzierungsziel. Ereignis Zielelement-Ereignis platzieren

Wenn ein Element auf ein gültiges Ablageziel gezogen wird, wird es einmal ausgelöst: Dragenter, Dragover, Dragleave oder Drop Ereignis

Solange ein Element zum Ablageziel gezogen wird, wird das Dragenter-Ereignis ausgelöst, gefolgt vom Dragover-Ereignis, und das Dragover-Ereignis wird weiterhin ausgelöst, während sich das gezogene Element noch innerhalb bewegt ; Wenn das Element aus dem Drop-Ziel gezogen wird, wird das Dragover-Ereignis nicht mehr ausgelöst, sondern das Dragleave-Ereignis wird anstelle des Dragleave-Ereignisses ausgelöst.

Gute Unterstützung in Google Chrome, aber nicht gut in Firefox

Benutzerdefiniertes Platzierungsziel

Wir können jedes Element in ein gültiges Platzierungsziel umwandeln. Die Methode besteht darin, das Standardverhalten von Dragenter- und Dragover-Ereignissen zu überschreiben. In FF besteht das Standardverhalten des Drop-Ereignisses darin, die URL zu öffnen, die auf dem Drop-Ziel platziert wurde Wenn es platziert wird, führt das Ziehen und Ablegen eines Bildes

zur Bilddatei. Das Ziehen und Ablegen von Text auf das Ablageziel führt zu einem ungültigen URL-Fehler

. Um dies zu erreichen, unterstützt FF das Standardverhalten des Drop-Ereignisses, um zu verhindern, dass es Drag-and-Drop-Ereignisse zum Übergeben von Daten verwendet Der Browser kann Drag-and-Drop-Interaktionsfunktionen ähnlich wie Desktop-Anwendungen nativ unterstützen. Um die Datenübertragungsfunktion nutzen zu können, benötigen Sie eine Schnittstelle namens dataTransfer.

Das dataTransfer-Objekt ist eine Eigenschaft des Ereignisobjekts. Es verfügt über zwei Hauptmethoden: getData() und setData(). setData() wird verwendet, um den Wert zu speichern, und getData() wird verwendet, um den von setData() gespeicherten Wert abzurufen.

Wenn Sie den Text in das Textfeld ziehen, ruft der Browser die Methode setData() auf, um den gezogenen Text im dataTransfer-Objekt im „Text“-Format zu speichern. Ebenso wird beim Ziehen und Ablegen eines Links oder Bildes die Methode setData() aufgerufen und die URL gespeichert. Wenn diese Elemente dann per Drag & Drop in das Ablageziel gezogen werden, können die Daten über die Methode getData() gelesen werden.

Der gespeicherte

Datentyp

ist „text“ oder „url“. In HTML5 werden diese beiden Datentypen „text/plain“ und „text/uri-list“ zugeordnetEs gibt einen Unterschied zwischen dem Speichern von Daten als Text und als URL. Wenn Sie die Daten im Textformat speichern, erfahren die Daten keine Sonderbehandlung. Wenn Sie die Daten als URL speichern, behandelt der Browser sie als Link auf der Webseite. Mit anderen Worten: Wenn Sie es in einem anderen Browserfenster platzieren, öffnet der Browser die URL.

Demo:Text Drag & Drop:

Link Drag & Drop:

Bild Drag & Drop:

Bilder hin und her ziehen und ablegen:

dropEffect- und effectAllowed-Attribute

Verwenden Sie das dataTransfer-Objekt nicht nur zum Übertragen von Daten, sondern auch zum Bestimmen des gezogenen Elements und sein Verhalten Welche Operationen das Drop-Zielelement empfangen kann. Dies erfordert Zugriff auf zwei seiner Eigenschaften: die dropEffect-Eigenschaft und die effectAllowed-Eigenschaft.

<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<title>HTML5文本拖放</title>
<head>
<style type="text/css">
#p1 {width:220px;height:185px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<p id="p1">拖动文本到矩形框中:</p>
<p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>
<br>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
 
function drag(ev)
{
  //dataTransfer.setData() 方法设置被拖数据的数据类型和值
  //这里数据类型是 "Text"，值是p标签中的文本
ev.dataTransfer.setData("Text",document.getElementById("p1").innerHTML);
}
 
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.innerHTML=data;
}
</script>
</body>
</html>

dropEffect Der Browser zeigt verschiedene Cursortypen entsprechend unterschiedlichen Werten an, um das Benutzerverhalten nach der Platzierung zu verbessern. dropEffect enthält die folgenden Werte:

•"none": Das gezogene Element kann hier nicht platziert werden

<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<title>HTML5链接拖放</title>
<head>
<style type="text/css">
#p1 {width:220px;height:185px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<a href="http://www.baidu.com" id="aa">链接到百度</a>
<p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>
<br>
<script type="text/javascript">
/*
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
 */
function allowDrop(ev)
{
ev.preventDefault();
}
 
function drag(ev)
{
  //dataTransfer.setData() 方法设置被拖数据的数据类型和值
  //这里数据类型是 "Text"，值是p标签中的文本
ev.dataTransfer.setData("URL",document.getElementById(data).href);
}
 
function drop(ev)
{
  //调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
ev.preventDefault();
//通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在setData()方法中设置为相同类型的任何数据。
var data=ev.dataTransfer.getData("URL");
ev.target.innerHTML=data;
}
</script>
</body>
</html>

•"move": Das gezogene Element soll zum Drop-Ziel verschoben werden

<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<title>HTML5图片拖放</title>
<head>
<style type="text/css">
#p1 {width:220px;height:185px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<p id="p1">拖动图片到矩形框中:</p>
<p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>
<br>
<img id="drag1" src="abao.png" draggable="true" ondragstart="drag(event)" width="220" height="181">
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
 
function drag(ev)
{
  //dataTransfer.setData() 方法设置被拖数据的数据类型和值
  //这里数据类型是 "Text"，值是可拖动元素的 id ("drag1")
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>

•"

kopieren

": Das gezogene Element soll zum Ablageziel

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>图片来回拖放</title>
    <style type="text/css">
    p{width: 230px;height: 185px;padding: 10px;float: left;margin-right: 10px;border: 1px solid#ccc;}
    </style>
  </head>
  <body>
  <p id="box1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>
  <p id="box2" ondrop="drop(event)" ondragover="allowDrop(event)"></p>
  <img src="abao.png" id="drag1" draggable="true" ondragstart="drag(event)">
  <script type="text/javascript">
  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>

kopiert werden

•"link":表示放置目标会打开拖动的元素 (但拖动的元素必须是一个链接，有URL)

浏览器仅仅会帮你改变光标的类型，但是要实现怎样的效果都是要开发者自己去实现。

dropEffect属性只有搭配effectAllowed属性才有用，effectAllowed属性表示允许拖动元素的哪种dropEffect行为，它的值有以下几种：

•"uninitialized":没有给被拖动的元素设置任何放置行为。

•"none": 被拖动的元素不能有任何行为

•"copy“：只允许值为 “copy” 的放置行为

•"link":只允许值为 “link” 的放置行为

•"move"：只允许值为 “move” 的放置行为

•"copyLink"： 允许值为 “copy” 和 “link” 的放置行为

•"copyMove"： 允许值为 “copy” 和 “move” 的放置行为

•"linkMove"： 允许值为 “link” 和 “move” 的放置行为

•"all"： 允许所有放置行为

必须在ondragstart事件处理程序中设置effectAllowed属性

Demo

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My-dropEffect and effectAllowed</title>
</head>
<body>
  <a href="http://www.baidu.com">链接到百度</a>
  <p style="width: 200px; height: 100px; float: right; background: red" id="droptarget"></p>
  <p id="output"></p>
  <script type="text/javascript" src="EventUtil.js"></script>
  <script type="text/javascript">
  var droptarget = document.getElementById("droptarget");//获取放置目标
  var link = document.links[0];
  //console.log(document.links);//HTMLCollection[a]
  //console.log(document.links[0]);// <a href="http://www.baidu.com">
    function handleEvent(event){
      document.getElementById("output").innerHTML += event.type + "<br>";
      switch(event.type){
        case "dragstart":
        case "dragend":
          event.dataTransfer.dropEffect = "link";
          //表示放置目标会打开拖动的元素。要想使用dropEffect，必须进行相应的设置，这里将其设置为link
          break;
        case "dragenter":
        case "dragover":
          EventUtil.preventDefault(event);
          event.dataTransfer.effectAllowed = "link";//表示值允许"link"的dropEffect
          break;
        case "drop":
        case "dragleave":
          droptarget.innerHTML = event.dataTransfer.getData("url") || 
          event.dataTransfer.getData("text/uri-list");
        //event.dataTransfer.getData("url") || event.dataTransfer.getData("text/uri-list");是读取URL
      }
 
    }
 
    EventUtil.addHandler(droptarget, "dragenter", handleEvent);
    EventUtil.addHandler(droptarget, "dragover", handleEvent);
    EventUtil.addHandler(droptarget, "dragleave", handleEvent);
    EventUtil.addHandler(droptarget, "drop", handleEvent);
    EventUtil.addHandler(link, "dragstart", handleEvent);
    EventUtil.addHandler(link, "dragend", handleEvent);
  </script>
</body>
</html>

Demo2:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My-dropEffect and effectAllowed</title>
</head>
<body>
<a href="http://www.baidu.com">链接到百度</a>
  <p>哈哈哈哈</p>
  <p style="width: 200px; height: 100px; float: right; background: red" id="droptarget"></p>
  <p id="output"></p>
  <script type="text/javascript" src="../EventUtil.js"></script>
  <script type="text/javascript">
  var droptarget = document.getElementById("droptarget");//获取放置目标
  var link = document.links[0];
  //console.log(document.links);//HTMLCollection[a]
  //console.log(document.links[0]);// <a href="http://www.baidu.com">
    function handleEvent(event){
      document.getElementById("output").innerHTML += event.type + "<br>";
      switch(event.type){
        case "dragstart":
        case "dragend":
          event.dataTransfer.dropEffect = "move";//表示应该把拖动的元素移动到放置目标
        case "dragenter":
        case "dragover":
          EventUtil.preventDefault(event);
          event.dataTransfer.effectAllowed = "move";//表示值允许"move"的dropEffect
          break;
        case "drop":
        case "dragleave":
          EventUtil.preventDefault(event);
          //这里是为了阻止放置事件的默认行为：打开被放到放置目标上的URL
          droptarget.innerHTML = event.dataTransfer.getData("Text");
      }
 
    }
    EventUtil.addHandler(droptarget, "dragenter", handleEvent);
    EventUtil.addHandler(droptarget, "dragover", handleEvent);
    EventUtil.addHandler(droptarget, "dragleave", handleEvent);
    EventUtil.addHandler(droptarget, "drop", handleEvent);
    EventUtil.addHandler(link, "dragstart", handleEvent);
    EventUtil.addHandler(link, "dragend", handleEvent);
  </script>
</body>
</html>

 以上就是js原生拖放的示例代码分享的内容，更多相关内容请关注PHP中文网（www.php.cn）！