事件名称 作用对象作用对象
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的新特性,如果你想了解更有相关的知识,你可以在一个叫做秒秒学的网站查找相关资料。