Home >Web Front-end >JS Tutorial >Sample code sharing for js native drag and drop

Sample code sharing for js native drag and drop

高洛峰Original: 2017-03-30 16:13:491194browse

Dragable

Images, links and text in web pages can be dragged by browser by default, HTML5 All HTML elements are provided with a draggable attribute. When the value of this attribute is true, the element is considered draggable.

When dragging an image or link, place the mouse on the image or link. , you can drag it by holding down the mouse. When dragging text, select the text first, and then drag the selected text like an image.

Events

Picture

is triggered in sequence: dragstart, drag, dragend events. The targets of these three events are the dragged elements. When the mouse button is pressed and the mouse starts to be moved, it will be on the dragged element. Trigger the dragstart event. After the dragstart event is triggered, the drag event will be triggered immediately, and the drag event will continue to be triggered while the element is being dragged; when the drag stops, whether the element is placed on a valid placement target or an invalid placement target, Trigger dragend event.

Place target element event

When an element is dragged to a valid drop target, it will trigger once: dragenter, dragover, dragleave or drop event

As long as an element is dragged to the drop target The dragenter event will be triggered on the target, followed by the dragover event, and the dragover event will continue to be triggered when the dragged element is still moving within the range of the placement target; if the element is dragged out of the placement target, the dragover event will be triggered. If the dragover event is no longer triggered, the dragleave event will be triggered. If the element is placed in the drop target, the drop event will be triggered instead of the dragleave event. The targets of these events are the elements that are the drop targets.

Good support, not so good on Firefox

Custom placement target

We can turn any element into a valid placement target by overriding the default

behavior of the dragenter and dragover events

In FF, the placement event The default behavior is to open the URL dropped on the drop target. In other words, if you drag and drop an image onto the drop target, the page will redirect to the image file; if you drag and drop text on the drop target, it will redirect to the image file. Resulting in an invalid URL error.

Therefore, in order for FF to support normal drag and drop, it is necessary to cancel the default behavior of the drop event and prevent it from opening the URL.

The biggest feature of native drag and drop is that it can. Use drag-and-drop events to transfer data, so that the browser can natively support drag-and-drop interaction functions similar to desktop applications. To use the data transfer function, you need an

interface

called dataTransfer.

The dataTransfer object is a property of the event object. It has two main methods: getData() and setData(). setData() is used to save the value, and getData() is used to obtain the value saved by setData(). When dragging the text in the text box, the browser will call the setData() method to save the dragged text in the dataTransfer object in "text" format. Similarly, when dragging and dropping a link or image, the setData() method will be called and the URL will be saved. Then, when these elements are dragged and dropped into the drop target, the data can be read through the getData() method.

The saved data type is "text" or "url". In HTML5, these two data types are mapped to "text/plain" and "text/uri-list"

Save data as text and URL There is a difference. If you save the data in text format, the data does not receive any special treatment. If you save the data as a URL, the browser will treat it as a link in the web page. In other words, if you place it in another browser window, the browser will open the URL.

Demo:

Text drag and drop:

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

Link drag and drop:

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

Picture drag and drop:

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

Picture drag and drop:

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

dropEffect and effectAllowed properties

Using the dataTransfer object, not only can data be transferred , which can also be used to determine what operations the dragged element and the drop target element can receive. This requires access to two of its properties: the dropEffect property and the effectAllowed property.

dropEffect The browser will display different types of cursors according to different values to improve the user's behavior after placing them. dropEffect includes the following values:

•"none": The dragged element cannot be placed here

•"move": The dragged element should be moved to the drop target

•"

copy

": It should Copy the dragged element to the drop target

•"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）！

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：javascript mouse eventsNext article：javascript mouse events

See more

Sample code sharing for js native drag and drop

Related articles