之前做项目过程中遇到了一个拖放的效果实现业务场景是为课程表手动拖拽添加课程。翻看了一下H5新增元素里面有实现拖放的效果，于是就写了一个demo效果如下图：

艏先，为了使元素可拖动把 draggable 属性设置为 true ：

然后，规定当元素被拖动时触发的事件在上面的HTML代码中，ondragstart 属性调用了一个函数start(event)，该事件方法是在拖拽元素时触发
ondragover 事件是在要放置的区域元素上定义，当鼠标拖拽着元素在该区域上方时触发
ondrop 事件是把元素拖拽到指定区域并松開鼠标时触发。

CSS没什么可说的自己看吧。

上面的JS代码要配合着HTML标签上的事件函数查看其实，整个过程很简单：

1. 当鼠标拖动元素时触發 ondragstart() 事件，获取要拖动元素的ID；
2. 当鼠标拖拽着元素放置到指定区域时触发 ondropover() 事件，在这里要阻止默认事件的触发；
3. 当鼠标拖拽元素到指定区域并松开鼠标时，触发 ondrop() 事件获取拖拽元素的对象，追加到放置区域的节点内部；