详解Html5关于拖拽（Drag 和 drop）的使用和事件

今天药忘吃喽~ 2023-02-15 12:57 14阅读 0赞

> 拖放（Drag 和 drop）是 HTML5 标准的组成部分。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

### 1. 相关事件 ###

**drag**

拖动元素或选择文本时触发此事件。

**dragend**

当拖动操作结束时（释放鼠标按钮或按下退出键），会触发此事件。

**dragenter**

当拖动的元素或选择文本输入有效的放置目标时，会触发此事件。

**dragexit**

当元素不再是拖动操作的选择目标时触发此事件。

**dragleave**

当拖动的元素或文本选择离开有效的放置目标时，会触发此事件。

**dragover**

当将元素或文本选择拖动到有效放置目标（每几百毫秒）上时，会触发此事件。

**dragstart**

当用户开始拖动元素或选择文本时触发此事件。

**drop**

当在有效放置目标上放置元素或选择文本时触发此事件。

### 2. 案例解析 ###

<!DOCTYPE HTML>
    <html>
    <head>
      <style type="text/css">
        #div1 {
          width: 450px;
          height: auto;
          padding: 30px;
          border: 1px solid #aaaaaa;
        }
    
        #div1 img {
         
          height: 100px;
        }
      </style>
      <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>
    </head>
    <body>
    
    <p>请把图片拖放到矩形中：</p>
    
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br />
    <img id="drag1" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591354852841&di=14fb86558db016cc05e2c6b80aea4249&imgtype=0&src=http%3A%2F%2Fimg.improve-yourmemory.com%2Fpic%2F78739853e99028b1705d953bf722b341-4.jpg"
         draggable="true" ondragstart="drag(event)" width="100px" />
    <img id="drag2" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591354852841&di=14fb86558db016cc05e2c6b80aea4249&imgtype=0&src=http%3A%2F%2Fimg.improve-yourmemory.com%2Fpic%2F78739853e99028b1705d953bf722b341-4.jpg"
         draggable="true" ondragstart="drag(event)" width="100px" />
    <img id="dra3" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591354852841&di=14fb86558db016cc05e2c6b80aea4249&imgtype=0&src=http%3A%2F%2Fimg.improve-yourmemory.com%2Fpic%2F78739853e99028b1705d953bf722b341-4.jpg"
         draggable="true" ondragstart="drag(event)" width="100px" />
    <img id="drag4" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591354852841&di=14fb86558db016cc05e2c6b80aea4249&imgtype=0&src=http%3A%2F%2Fimg.improve-yourmemory.com%2Fpic%2F78739853e99028b1705d953bf722b341-4.jpg"
         draggable="true" ondragstart="drag(event)" width="100px" />
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70][]

拖动后的效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 1][]

**首先设置元素为可拖放**

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

**拖动之后把被拖的对象保存进这个方法**

ondragstart 属性调用了一个函数，drag(*event*)，它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

function drag(ev){
      ev.dataTransfer.setData("Text",ev.target.id);
    }

**当拖到指定位置执行相关函数**

被放的元素   ondragover  监听时，阻止默认使其可以放元素

监听放置 ondrop 去执行你要做的事情，比如上一个例子，就是把刚才保存的id的dom，然后放入div中

*  调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
 *  通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
 *  被拖数据是被拖元素的 id ("drag1")
 *  把被拖元素追加到放置元素（目标元素）中

下边这个案例更好说明，拖放事件

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title></title>
      <style>
        #draggable {
          width: 200px;
          height: 20px;
          text-align: center;
          background: white;
        }
    
        .dropzone {
          width: 200px;
          height: 20px;
          background: blueviolet;
          margin-bottom: 10px;
          padding: 10px;
        }
      </style>
    </head>
    <body>
    <div class="dropzone">
      <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
        This div is draggable
      </div>
    </div>
    <div class="dropzone"></div>
    <div class="dropzone"></div>
    <div class="dropzone"></div>
    <script type="text/javascript">
      var dragged;
    
      /* events fired on the draggable target */
      document.addEventListener("drag", function(event) {
    
      }, false);
    
      document.addEventListener("dragstart", function(event) {
        // store a ref. on the dragged elem
        dragged = event.target;
        // make it half transparent
        event.target.style.opacity = .5;
      }, false);
    
      document.addEventListener("dragend", function(event) {
        // reset the transparency
        event.target.style.opacity = "";
      }, false);
    
      /* events fired on the drop targets */
      document.addEventListener("dragover", function(event) {
        // prevent default to allow drop
        event.preventDefault();
      }, false);
    
      document.addEventListener("dragenter", function(event) {
        // highlight potential drop target when the draggable element enters it
        if (event.target.className == "dropzone") {
          event.target.style.background = "purple";
        }
    
      }, false);
    
      document.addEventListener("dragleave", function(event) {
        // reset background of potential drop target when the draggable element leaves it
        if (event.target.className == "dropzone") {
          event.target.style.background = "";
        }
    
      }, false);
    
      document.addEventListener("drop", function(event) {
        // prevent default action (open as link for some elements)
        event.preventDefault();
        // move dragged elem to the selected drop target
        if (event.target.className == "dropzone") {
          event.target.style.background = "";
          dragged.parentNode.removeChild( dragged );
          event.target.appendChild( dragged );
        }
      }, false);
    </script>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200605165829532.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200605165844604.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200605171149177.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA==,size_16,color_FFFFFF,t_70