基於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的。本期就先寫到這裏了