使用原生drag拖放元素时，event对象的dataTransfer属性们

淩亂°似流年 2023-06-27 03:51 27阅读 0赞

拖放元素时，拖放事件发生顺序如下：  
dragstart ->drag -> dragenter -> dragover ->drop ->dragend 还有一个dragleave  
他们的event对象特有一个dataTransfer属性，主要用于源元素和目标元素之间传递数据

# dataTransfer属性如下： #

## 1. setData(key, value) ##

该方法只能在dragstart中调用，其他事件回调中调用无效  
key:数据的类型或格式（也可以自定义）

<table> 
 <thead> 
  <tr> 
   <th align="left">名称</th> 
   <th align="left">含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">text/plain</td> 
   <td align="left">文本格式</td> 
  </tr> 
  <tr> 
   <td align="left">text/html</td> 
   <td align="left">html格式</td> 
  </tr> 
  <tr> 
   <td align="left">text/uri-list</td> 
   <td align="left">链接格式</td> 
  </tr> 
 </tbody> 
</table>

拖动文本（默认是text）或者从操作系统向浏览器拖拽文件时，无需调用，系统会自动完成

## 2. getData(key) ##

只能在drop中调用，获取具体的值

## 3. clearData(\[key\]) ##

清空数据，该方法只接收一个参数，要删除的数据类型  
参数是可选的，如果不传参，删除所有数据类型

## 4. effectAllowed ##

设置或返回被拖动元素允许的操作行为。通常会与dropEffect结合使用  
在dragstart中设置，其他事件回调中设置是无效的

<table> 
 <thead> 
  <tr> 
   <th align="left">名称</th> 
   <th align="left">含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">none</td> 
   <td align="left">不允许拖放，一旦设置了该属性，所有的拖放事件都无效了</td> 
  </tr> 
  <tr> 
   <td align="left">copy</td> 
   <td align="left">复制拖动元素</td> 
  </tr> 
  <tr> 
   <td align="left">move</td> 
   <td align="left">移动</td> 
  </tr> 
  <tr> 
   <td align="left">link</td> 
   <td align="left">链接</td> 
  </tr> 
  <tr> 
   <td align="left">copymove</td> 
   <td align="left">移动或者链接</td> 
  </tr> 
  <tr> 
   <td align="left">copyLink</td> 
   <td align="left">复制或者链接</td> 
  </tr> 
  <tr> 
   <td align="left">linkMove</td> 
   <td align="left">链接或者移动</td> 
  </tr> 
  <tr> 
   <td align="left">all</td> 
   <td align="left">任何操作都允许</td> 
  </tr> 
 </tbody> 
</table>

## 5. dropEffect ##

设置目标元素上允许的拖放行为  
可设置的值有：none copy link move  
如果dropEffect的值不在effectAllowed范围内时拖放操作不会实现

## 6. files ##

文件信息，一般用于将文件从桌面拖动到浏览器目标区域

## 7. items ##

代表拖动数据

## 8. setDragImage(element, x, y) ##

设置拖动时显示的图像信息， 他可以是画布或者其他任何元素  
element：要自定义显示的图像，  
x：图像距离鼠标位置水平偏移量，  
y：图像距离鼠标位置垂直偏移量

<!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>拖拽测试</title>
      <style> #drag-target { background: green; width: 80px; height:30px; font-size:16px; padding: 20px; cursor: move; } #drag-aim { list-style: none; padding:0; } #drag-aim li { padding:0; margin: 20px 0; height: 40px; border: 1px solid #eee; border-radius: 5px; } #drag-aim li.active { background: rgba(255, 0, 0, .5); border-color: red; transition: all 0.3s; } </style>
    </head>
    <body>
      <div id="drag-target" draggable="true">
        try to drag me!
      </div>
      <p>
    	  选中文本，并且拖动试一下！！！！！！！
      </p>
    
      <ul id="drag-aim">
        <li>目标区域一</li>
        <li>目标区域二</li>
        <li>目标区域三</li>
      </ul>
      <script> let target = document.querySelector('#drag-target'); let aim = document.querySelector('#drag-aim').querySelectorAll('li'); var img = new Image() img.src= "assets/1.png" target.addEventListener('dragstart', function(e){ console.log('开始拖动了') aim[0].className = 'active' e.dataTransfer.effectAllowed = "copyLink" // 设置拖拽数据 e.dataTransfer.setData('aaa', 'https://cdn.glitch.com/20f985bd-431d-4807-857b-e966e015c91b%2Ftruck-clip-art-fire-truck4.png?1519011787956') e.dataTransfer.setData('text/uri-list','https://cdn.glitch.com/20f985bd-431d-4807-857b-e966e015c91b%2Ftruck-clip-art-fire-truck4.png?1519011787956') // 设置拖动图像 e.dataTransfer.setDragImage(img, 25, 25) }, false) target.addEventListener('dragend', function(e){ console.log('拖拽结束') console.log(e.dataTransfer) aim[0].className = '' }) aim[0].addEventListener('dragover', function(e){ e.dataTransfer.dropEffect = 'link' // 必须加这句，表示允许放置元素，否则监听不到drop事件 e.preventDefault() }, false) aim[0].addEventListener('drop', function(e){ e.preventDefault() console.log('拖给我了！') console.log(e.dataTransfer.getData('aaa')) console.log(e.dataTransfer.getData('text')) aim[0].appendChild(target) }, false) </script>
    </body>
    </html>