drag and drop 事件

最新推荐文章于 2024-04-11 09:25:56 发布

原创最新推荐文章于 2024-04-11 09:25:56 发布 · 324 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

事件拖放专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了HTML5中的拖放事件，包括dragstart、drag、dragend等事件源拖放事件，以及dragenter、dragover、dragleave等目标源拖放事件。文章强调了在dragover事件中使用e.preventDefault()的重要性，并提供了外部文件拖动行为的实现示例。

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

drag and drop 事件

drag （事件源拖放事件）

dragstart
拖放事件开始的触发前提是事件源具有dragable=true 才可以
drag
拖放事件该事件是持续进行
dragend
该事件结束的时候触发

## drop（目标源拖放事件）

dragenter

进入事件目标的时候触发
dragover

拖放事件在目标源中移动的时候触发
dragleave

事件拖放后触发

notice

拖放事件 必须阻止默认行为  且在dragover 中执行 e.preventDefault();  否则没有用

外部文件拖动行为（e 是事件多个文件拖放）

 [].forEach.call(e.originalEvent.dataTransfer.files,function (item){
               if(item){
                    doSomething(item)
               }
           },false/true);

微圈点视频上传案例