drag and drop(拖拽)

最新推荐文章于 2025-05-08 14:10:38 发布

原创最新推荐文章于 2025-05-08 14:10:38 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了HTML5中拖拽事件的工作原理及实现细节，包括拖拽元素与目标元素的事件触发顺序、火狐浏览器下的特殊处理方式以及dataTransfer对象的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

拖拽元素事件 : 事件对象为被拖拽元素

dragstart :  拖拽前触发 
drag :拖拽前、拖拽结束之间，连续触发
dragend  : 拖拽结束触发

目标元素事件 : 事件对象为目标元素

dragenter :  进入目标元素触发，相当于mouseover
dragover : 进入目标、离开目标之间，连续触发
dragleave :  离开目标元素触发，相当于mouseout
drop  :  在目标元素上释放鼠标触发

事件的执行顺序：drop不触发的时候

dragstart  >  drag >  dragenter >  dragover >  dragleave > dragend

事件的执行顺序：drop触发的时候(dragover的时候阻止默认事件)

dragstart  >  drag >  dragenter >  dragover >  drop > dragend

解决火狐下的问题

火狐浏览器下必须设置dataTransfer对象的setData方法才可以拖拽除图片外的其他标签。

dataTransfer属性和方法

    属性              描述
    dropEffect      设置或获取拖曳操作的类型和要显示的光标类型。
    effectAllowed    设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)

    setDragImage    三个参数：指定的元素，坐标X，坐标Y
    files           获取外部拖拽的文件，返回一个filesList列表。filesList下有个type属性，返回文件的类型


    方法            描述
    clearData   通过 dataTransfer 或 clipboardData 对象从剪贴板删除一种或多种数据格式。

    setData() : 设置数据 key和value(必须是字符串)

    getData() : 获取数据，根据key值，获取对应的value

只有加阻止默认事件才可以触发drop

 oDiv.ondragover = function(ev){  //只有加阻止默认事件才可以触发drop
        ev.preventDefault();
    };