基于HTML5的拖动排序
转载自 SegmentFault
好久没有写文章，不知道写什么好。突然想到拖动这个API。之前使用 jQuery UI 实例 - 排序（Sortable）去实现了一个拖动排序，也有用jquery.gridly.js实现的一个拖动排序。
jQuery UI - Sortable
DOM节点的移动，用起来挺好的，使用简单，配套的组件也多。顺序就直接是DOM的顺序。
jquery.gridly.js
采用absolute的方式，获取排序位置的时候需要根据left，top再去排序。
HTML5-draggable
HTML5的新特性，想要拖放某个元素，将DOM的draggable属性为true，反之不允许拖动。
draggable属性
http://jsrun.net/ptkKp/edit
draggable为true的时候，我们可以试试。当你尝试拖动的时候，会有一个虚影。
http://jsrun.net/ZtkKp/edit draggable为false的时候，尝试拖动的时候，不会出现虚影，直接就是选中文字。
那么为什么我们draggable设置好了以后，也可以拖动，但是松开鼠标的时候不生效呢？那么我们就要想想我们拖动的时候都发生了什么。
draggable事件
ondragstart 元素被拖动时触发
http://jsrun.net/ftkKp/edit
我们可以通过target和type看到触发事件的dom节点，以及事件名称
ondragover 当你拖动时在元素之上触发 http://jsrun.net/QtkKp/edit 通过例子可以发现，我们拖动上面的元素到下面绿色区域就触发事件 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。 event.preventDefault() ;
ondrop 当你进行放置的时候（也就是你拖动，松开按键的时候） http://jsrun.net/dtkKp/edit 我们会发现ondrop居然没有生效，这个时候我们去看我们上面删除的那句话。我们将它应用进去 http://jsrun.net/ttkKp/edit 加上了ondragover 的阻止默认事件。并且里面多加了个去抖(1秒，超长时长 = = )
简单版本
先放一个appendChild的。本期就先写到这里了
原文：SegmentFault