基于HTML5的拖动排序

好久没有写文章，不知道写什么好。突然想到拖动这个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秒，超长时长 = = )

简单版本

---

http://jsrun.net/CtkKp/edit

先放一个appendChild的。本期就先写到这里了