浅谈浏览器的原生拖拽事件

虽然之前有写过模拟浏览器拖拽行为的组件，但这种拖拽仅限于改变 DOM 元素的位置，只是 UI 层面的交互效果。最近在做的拖拽上传文件，拖拽时需要和服务端进行数据层面的交互，此时就需要用到浏览器原生的拖拽事件。

在高级浏览器中，DOM 元素都有一个 draggable 属性，用于标记其是否可以在浏览器中拖拽，常见的 a 、img 元素的 draggable 默认值为 true，浏览器默认其是可以拖拽的，而其他的布局元素如 div、p 这些默认并不支持拖拽，所以值是 false，如果想让其可以拖动，需要先将其设置成 true。

再来看看原生的拖拽相关的事件类型：

• drag : 元素被拖拽时由拖拽元素频繁触发的事件(每隔几百毫秒就会触发一次)
• dragstart : 拖拽时开始时由拖拽元素触发的事件
• dragend : 拖拽结束时触发由拖拽元素的事件
• dragover : 当拖拽元素进入放置区域时由放置元素频繁触发的事件(每隔几百毫秒就会触发一次)
• dragenter : 当拖拽元素进入放置区域时由放置元素触发的事件
• dragleave : 当拖拽元素离开放置区域时由放置元素触发的事件
• drop : 当拖拽元素在放置区域放置时由放置元素触发的事件

将一个文件拖拽并放置到浏览器中，浏览器默认会触发 drop 事件，为了阻止浏览器默认的放置事件，需要在 dragover 和 drop 事件中进行阻止。

在 IE10 以下的浏览器中，并不是完全不支持，只是支持程度有限，没有可玩性，这里就不多说了。

在高级浏览器中拖拽事件接口的对象中都有一个高级对象 dataTransfer，拖拽的数据就保存在这个对象中，正因为拖拽时能传递数据才有了可玩性，可见该对象的重要程度。HTML5 中关于拖拽相关的高级功能都是通过该对象来实现的。

常见的拖拽上传需要从系统向浏览器拖进一个文件，该文件就保存在 dataTransfer 中，在放置的时候就可以通过该对象来读取文件，代码如下：

（编辑：佛山站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!