拖放 drag

在标签中添加draggable="true"，标签即可拖动。

七个事件

1.ondragstart 拖放开始
2.ondrag 拖放中
3.ondragend 拖放结束
4.ondragenter 拖拽其他元素进入绑定事件的元素（从鼠标进入算进入）
5.ondragover 拖拽其他元素进入绑定事件的元素后（持续发生，同ondrag）
6.ondragleave 拖拽其他元素离开绑定事件的元素（从鼠标离开算离开）
7.ondrog 拖拽其他元素到绑定事件的元素中松开

看完上面gif图的有没有发现，前三个事件都触发了，为啥第四个事件，drop 不会触发呢？为什么在黑框里面放置红方块不会触发，在外面放置也不会触发？
这是因为，ondragover这个事件有一个默认行为，在 ondragover的最后默认被拖拽的元素回到原位（我是这么理解的），这样就解释了，在被绑定元素中松开了拖拽元素，没有触发ondrog而是触发了ondragleave。
如果你想完成的操作是，把红色的块放到我们绑定事件的盒子中松开从而触发事件ondrog，那么就阻止ondragover的默认行为
box.ondragover = function(e){
e.preventDefault();
console.log('over');
}
这样就可以触发ondrog。
同时，阻止了ondragover的默认行为后，把红色的块放到我们绑定事件的盒子中松开这个操作不再触发ondragleave，只触发ondrog。
更多参考： www.cnblogs.com/yanggeng/p/…