创建拖放删除html文件，快速生成文档结构

拖放删除实例开发。

创建拖放删除html文件，快速生成文档结构。

·通过ul li元素创建若干拖放元素，并设置相应样式。

·通过div delete元素创建回收站元素。

·在JS中声明变量items获取所有拖放元素，声明变量del获取回收站元素，声明变量dragEl备用。

·通过循环为每个拖放元素添加draggable属性，值为true。

·然后为每个拖放元素添加ondragstart事件，并将当下正在被拖放的元素赋值到变量dragEl中。

·为回收站元素del添加ondragover事件。

·当被拖放元素进入回收站元素范围时，清除浏览器中的样式，消除不至播放效果。

·最后当拖放释放鼠标按键时，将被拖放元素移除。

到这里一个将元素拖到回收站时会移除当前元素的拖放删除效果就做好啦。

总结一下，今天我们了解了draggable属性、ondragover事件、ondragstart事件以及ondrop事件。

·其中draggable属性的属性值设置为true，可以使目标元素成为可拖动元素。

·ondragover事件可以在开始拖动元素时触发。

·ondragover事件可以在被拖动的元素在被放置容器范围内拖动时触发。

·ondrop事件可以在拖动时释放鼠标按键时触发。

你学会了吗？