基于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的。本期就先写到这里了