请问HTML5中drag&drop触发事件有哪些?能否简单的介绍一下?

请问HTML5中drag&drop触发事件有哪些?能否简单的介绍一下?,第1张

拖动和拖放过程中会涉及到两个对象,一个是被拖动的drag对象,一个是drop对象(拖放容器对象)。 在拖动和拖放这一过程中会发生七大事件。下面是对这七大事件的简单介绍:

事件名称 作用对象作用对象

Dragstar事件被拖动的drag对象。 当对象开始拖动时触发。

Drag事件 被拖动的drag对象。 在Drag对象被拖动期间连续触发。

Dragend事件 被拖动的drag对象。 在Drag对象拖动到Drop目标对象上时被触发。

Dragenter事件 drop对象 在Drag对象拖动到Drop目标对象边界时触发。

Dragover事件 drop对象 当Drag对象在Drop目标对象上移动时触发,且会反复的触发该事件。

Dragleave事件 drop对象 Dragleave事件在这个拖动对象离开Drop目标对象的范围时触发。

Drop事件 drop对象 当这个Drag对象在Drop对象上释放鼠标时触发

这些是HTML5的新特性,可以在秒秒学查找相关的资料。

一个完整的drag and drop流程通常包含以下几个步骤:

1.设置可拖拽目标.设置属性draggable="true"使元素编程可拖拽对象.

2.监听dragstart设置拖拽数据

3.为拖拽 *** 作设置反馈图标(可选)

4.设置允许的拖放效果,如copy,move,link

5.设置拖放目标,默认情况下浏览器阻止所有的拖放 *** 作,所以需要监听dragenter或者dragover取消浏览器默认行为使元素可拖放.

6.监听drop事件执行所需 *** 作

这些是HTML5的新特性,如果你想了解更有相关的知识,你可以在一个叫做秒秒学的网站查找相关资料。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://www.outofmemory.cn/zaji/6100494.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-14
下一篇 2023-03-14

发表评论

登录后才能评论

评论列表(0条)

保存