javaScript drag对象进行拖拽使用详解

目录

• drag简介
• 兼容性
• drag事件
• 拖拽流程
• DataTransfer对象
• drag拖放桌面文件
• drag实例
• 小结

drag简介

HMTL5提供的支持原生拖拽的实现

兼容性如何？

桌面端的支持比较好，移动端的支持还是比较差

拖拽流程

1.设置可拖拽目标.设置属性draggable="true"实现元素的可拖拽(文本、图片和链接是默认可以拖放的，它们的draggable属性自动被设置成了true。)
2.监听dragstart，通过DataTransfer设置拖拽数据
3.为拖拽操作设置反馈图标(可选)
4.设置允许的拖放效果，如copy,move,link
5.设置拖放目标，默认情况下浏览器阻止所有的拖放操作，所以需要监听dragenter或者dragover取消浏览器默认行为使元素可拖放.
6.监听drop事件执行所需操作

drag事件

dragstart：在元素开始被拖动时候触发
drag：在元素被拖动时反复触发（可以在此处节流）
dragend：在拖动操作完成时触发
dragenter：当被拖动元素进入目的地元素所占据的屏幕空间时触发
dragover：当被拖动元素在目的地元素内时触发
dragleave 当被拖动元素没有放下就离开目的地元素时触发

DataTransfer对象

在进行拖放操作时，DataTransfer 对象用来保存，通过拖放动作，拖动到浏览器的数据。它可以保存一项或多项数据、一种或者多种数据类型。

e.dataTransfer.files

包含一个在数据传输上所有可用的本地文件列表。如果拖动操作不涉及拖动文件，此属性是一个空列表。

e.dataTransfer.types

保存一个被存储数据的类型列表作为第一项，顺序与被添加数据的顺序一致。

DataTransfer-MDN

从操作系统拖拽图片到指定区域进行预览

从操作系统拖拽文件到浏览器中.不会触发dragstart,dragend,只需取消拖放区域的默认行为,设置反馈,并在拖放发生时取消浏览器默认行为,通过e.dataTransfer.files获取文件信息进行操作

  
从文件夹中拖拽图片到下面的区域进行预览
  

  

  
 

drag实例

  

    This div is draggable
  

小结

通过本章的学习，我们更深入的了解到如何使用drag进行拖放，并且通过dataTransfer获取拖放的相应数据。由于该对象的浏览器兼容还存在问题，所以在使用时务必查询的can i use，确保符合项目需求。否则可以选择 mouse事件进行拖拽处理

转载于:https://www.cnblogs.com/shiyou00/p/10393703.html