HTML5之拖放API实现拖放排序
前言
HTML5 中提供了直接拖放的 API，极大的方便我们实现拖放效果，不需要去写一大堆的 js，只需要通过监听元素的拖放事件就能实现各种拖放功能。
想要拖放某个元素，必须设置该元素的 draggable 属性为 true，当该属性为 false 时，将不允许拖放。而 img 元素和 a 元素都默认设置了 draggable 属性为 true，可直接拖放，如果不想拖放这两个元素，把属性设为 false 即可。
拖放事件
拖放事件由不同的元素产生。一个元素被拖放，他可能会经过很多个元素上，最终到达想要放置的元素内。这里，我暂时把被拖放的元素称为源对象，被经过的元素称为过程对象，到达的元素我称为目标对象。不同的对象产生不同的拖放事件。
原文作者：林鑫，作者博客：https://github.com/lin-xin/blog，原文地址：http://www.cnblogs.com/linxin/archive/2017/05/02/6794542.html
源对象：
- dragstart：源对象开始拖放。
- drag：源对象拖放过程中。
- dragend：源对象拖放结束。
过程对象：
- dragenter：源对象开始进入过程对象范围内。
- dragover：源对象在过程对象范围内移动。
- dragleave：源对象离开过程对象的范围。
目标对象：
- drop：源对象被拖放到目标对象内。
<div id="source" draggable="true">a元素</div> <div id="process">b元素</div> <div id="target">c元素</div> <script> var source = document.getElementById('source'), // a元素 process = document.getElementById('process'), // b元素 target = document.getElementById('target'); // c元素 source.addEventListener('dragstart',function(ev){ // dragstart事件由a元素产生 console.log('a元素开始被拖动'); },false) process.addEventListener('dragenter',function(ev){ // dragenter事件由b元素产生 console.log('a元素开始进入b元素'); },false) process.addEventListener('dragleave',function(ev){ // dragleave事件由b元素产生 console.log('a元素离开b元素'); },false) target.addEventListener('drop',function(ev){ // drop事件由c元素产生