HTML5--拖放事件与dataTransfer对象

左手的ㄟ右手 2022-02-24 14:42 316阅读 0赞

### 文章目录 ###

*  简介
 *  拖放事件
 *  dataTransfer对象
 *   *  方法
 *  例子

# 简介 #

若不使用HTML5的拖放事件，我们仍可以通过`mousedown`、`mousemove`、`mouseup`这三个事件来实现页面元素被鼠标拖拽的效果。

然而这样实现的拖拽仅仅是交互上的，即只是显示上的变化，并没有什么实质性的功能。而HTML5中直接提供了拖放的API，只要通过监听元素的拖放事件就能实现各种拖放功能。

若要拖放某个元素，则必须将其的`draggable`属性设置为`true`。**`img`和`a`元素默认为`true`。**

# 拖放事件 #

拖放的过程中被拖放的对象被称为**源对象**，过拖放过程中间经过的其他对象被称为**过程对象**，最终到达的对象称作**目标对象**。

拖放事件可以用这三种对象来分类，不同的事件会被哪一种对象触发。

*  源对象：
    
     *  `dragstart`：源对象开始拖放，开始移动时事件触发
     *  `drag`：源对象拖放过程中，移动被拖拽对象时触发
     *  `dragend`：源对象拖放结束，整个拖放操作结束时触发。
 *  过程对象：
    
     *  `dragenter`：源对象进入过程对象范围内，被拖拽对象进入过程对象时被触发
     *  `dragover`：源对象在过程对象范围内移动，被拖拽对象在过程对象内移动时触发
     *  `dragleave`：源对象离开过程对象的范围，被拖拽对象离开目标对象时触发
 *  目标对象：
    
     *  `drop`：源对象拖放到目标对象中，目标对象完全接受被拖拽对象时触发，可理解为在目标对象内松手时触发。

# dataTransfer对象 #

在所有的拖放事件中都提供了一个数据传输对象`dataTransfer`，主要是用于在源对象和目标对象之间传递数据。

## 方法 ##

*  `setData(format, data)`
    
     *  设置拖拽事件中要传递的数据，`format`的参数为数据类型
     *  该方法向`dataTransfer`中对象中存入数据，接受两个参数，第一个表示要存入的数据类型，共有4种：
        
         *  text/plain
         *  text/html
         *  text/xml
         *  text/uri-list
     *  第二个参数为要存入的数据，例如：`event.dataTransfer.setData('text/plain', 'hello world')`

**注：如果给定类型的数据不存在，则将其添加到拖动数据存储的末尾，使得`dataTransfer.types`列表中的最后一个项目将是新类型。**

*  `getData(format)`
    
     *  获得拖拽事件中传递的数据，`format`参数为数据类型
     *  该方法从`dataTransfer`对象中读取数据，参数为在`setData`方法中指定的数据类型，例如：`event.dataTransfer.getData('text/plain')`
 *  `clearData()`
    
     *  该方法清空`dataTransfer`对象中存储的数据，参数可选，为数据类型。若为空，则清空所有数据。
 *  `setDragImage(element,x,y)`
    
     *  该方法通过`img`元素来设置拖放图标
     *  `element`表示拖拽时鼠标下面的图片（通常是image元素，也可以说canvas元素）
     *  x、y分别指示相对于图片的横向和纵向偏移量，相对应鼠标指针。
 *  `files`属性
    
     *  返回被拖拽的文件列表，是一个`FileList`对象，有`length`属性，可通过下标访问。

# 例子 #

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
        .container{
         
          width: 200px;
          height: 300px;
          background: #ff0000;
        }
    
        .item{
         
          width: 200px;
          height: 100px;
          background: pink;
        }
    
        .dragOver{
         
          background: rgba(255, 0, 0, 0.5);
        }
        .hidden{
         
          display: none;
        }
      </style>
    </head>
    <body>
      <div class="container" id='container' ondragleave="dragleave(event)" ondragenter="dragenter(event)" ondrop="drop(event)" ondragover="dragover(event)"></div>
      <div class="item" draggable="true" ondragstart="dragStart(event)" id="item"></div>
      <img src="WechatIMG1607.jpeg" class="hidden"/>
      <script>
        function dragStart(e){
         
          e.dataTransfer.setData('id', e.target.id);
          let image = document.querySelector('img').cloneNode();
          image.classList.remove('hidden');
          e.dataTransfer.setDragImage(image,150,150);
        }
    
        function drop(e){
         
          e.preventDefault();
          let id = e.dataTransfer.getData('id');
          e.target.appendChild(document.getElementById(id));
        }
    
        function dragover(e){
         
          e.preventDefault();
          e.target.classList.add('dragOver');
        }
    
        function dragleave(e){
         
          console.log('leave');
          e.target.classList.remove('dragOver');
        }    
      </script>
    </body>
    </html>

如果想自己试试效果可以把图片自行换掉。

效果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]

（不要吐槽我为啥放只牛的图片…正好在桌面上看到就用了…）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]: /images/20220224/77a39027a73d4c59a8c8fa42966a4685.png