拖拽排序元件github位址：
因為使用了react.js技術棧，所以封裝優先考慮輸入和輸出。基於資料驅動去渲染頁面、控制拖拽元素的順序。
由於我不考慮相容ie8等舊版本瀏覽器，拖拽的效果採用了html5的拖放（drag 和 drop）。當然，如果要求相容性豐富，使用滑鼠點選的相關事件也很簡單。
實現的效果如下：
第一步是先了解h5拖放的相關屬性，mdn上有詳細的說明，鏈結為
有一點需要注意的是，react.js會給所有的屬性事件名稱前加上"on",後面則為駝峰式寫法。例如原生的click事件，在react.js裡應使用onclick事件。
我的元件使用的拖放屬性如下：
其中draggable，ondragstart是被「拖拽」方需要設定的屬性，ondragover，ondragenter，ondragle**e和ondrop是被「拖入」方需要設定的屬性。不過對於我的拖拽排序元件，每乙個元素都是拖拽和拖入方
第二步，既然「她"是react.js的元件, 按照習慣，簡單的將輸入屬性定為為value，同時，暴露onchange事件監聽value的變化，並將其暴露給父元件，同時，暴露乙個屬性sortkey告訴元件使用哪個key作為排序字段。
既然涉及到排序，同時允許指定元件每個元素的內部子元件，我將輸入資料格式定義為乙個陣列物件，其中content可以為reactnode：
value: [,,
,,
]根據value我去生成可排序元件的每個node，關鍵**如下：
// 生成拖拽元件
程式設計客棧createdragglecomponent(data, sortkey, style, uid) )})
}render() = this.props;
return ()}
其中的屬性方法具體實現：
// 拖動事件
domdrugstart(sort, code, ee)
// 拖動後滑鼠進入另乙個可接受區域
dragenter(ee)
// a拖到b，離開b的時候觸發
dragle**e(ee)
// 物件排序
compare(key) else if (obj1[key] > obj2[key])
return 0}}
// 當乙個元素或是選中的文字被拖拽釋放到乙個有效的釋放目標位置時
drop(dropedsort, data, sortkey, ee) else if (item[sortkey] > sort && item[sortkey] < dropedsort + 1)
return item;
});} else else if (item[sortkey] > dropedsort - 1 && item[sortkey] < sort)
return item;
});}
this.props.onchange(data)
}allowdrop(ee)
值得注意的點其實只有乙個，我控制順序的時候，並沒有使用.target.before(document.getelementbyid())去實際操控節點，而是在每次觸發ondrop時間的時候，處理資料的sort，並通過onchange事件暴露給父元件，將資料輸出，通過改www.cppcns.com變value值觸發虛擬dom重新去渲染，以此控制順序。
根據公司的要求，在此基礎上，我還實現了拖拽複製的功能，這個等下次自己不懶的時候再記錄下來。
本文標題: 基於html5實現的react拖拽排序元件示例
本文位址:
2 基於html5的模板
2.基於html5的模板 html5的模板包括doctype,html元素，head元素 1.doctype 是我們進行文件型別宣告，讓用來告訴瀏覽器 或任何分析程式 他們所檢視的檔案型別。在過去的doctype宣告非常難看且難記 熟悉html的人對這些 在熟悉不過了。但是在html5中將上述 精簡...
HTML5實現拖放
拖放 drag 和 drop 是 html5 標準的組成部分。拖放是一種常見的特性，即抓取物件以後拖到另乙個位置。在 html5 中，拖放是標準的一部分，任何元素都能夠拖放。internet explorer 9 firefox opera 12 chrome 以及 safari 5 支援拖放。注釋...
基於HTML5堆木頭遊戲
今天要來分享一款很經典的html5遊戲 堆木頭遊戲，這款遊戲的玩法是將木頭堆積起來，多出的部分將被切除，直到下一根木頭無法堆放為止。這款html5遊戲的難點在於待堆放的木頭是移動的，因此需要你很好的控制木頭下落的位置。實現的 html div style width 320px height 370...