html新特性——拖拽（drag和drop）

html-css08

html新特性——拖拽（drag和drop）,第1张

被拖动的元素增加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的新特性，如果你想了解更有相关的知识，你可以在一个叫做秒秒学的网站查找相关资料。