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

html-css010

请问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的新特性，可以在秒秒学查找相关的资料。

被拖动的元素增加draggable="true"属性；

接受拖过来的元素要接受新元素，ondragover 事件触发的时候要禁止自设的默认事件e.preventDefault()

监听ondrop事件，将元素进行插入appendChild；

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

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

2.监听dragstart设置拖拽数据

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

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

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

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

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