為什么棄用Html5 drag Api
- 之前我也用的Drag Api寫了一個draggable組件，使用起來總覺得體驗有點不好。
- 先來看有贊做的類似的拖拽UI組件，它引用的sortablejs庫封裝了Drag Api
- 1、拖拽的時候跟隨鼠標的影子成為ghost，是Api自動生成的。但是由於這是一個很簡潔的頁面，背景全為白色在拖拽的時候其實很難看出拖到了哪里。Api雖然提供了e.dataTransfer.setDragImage(img, 0, 0)方法讓我們在去改變這個ghost，但是設置的這個img必須是HTML img element、HTML canvas element，否則它必須是一個可見的節點。簡單來說就是如果你設置的ghost不是canvas或者img元素，而是你自定義的html元素，那你必須把它append到document中。
document.getElementById("drag-with-create-add").addEventListener("dragstart", function(e) {
var crt = this.cloneNode(true);
crt.style.backgroundColor = "red";
document.body.appendChild(crt);
e.dataTransfer.setDragImage(crt, 0, 0);
}, false);- 這種方式好像解決了拖拽不明顯的問題，但是設置的ghost是默認有一個透明度的，而且你沒有辦法去改變這個透明度。在上面顯示的這個頁面里面，即使是cloneNode一個元素出來跟隨鼠標也由於這個原因有種不清晰的感覺。
- 2、快速拖拽的時候元素在不停的回流和重繪
- 從上圖可以看到在拖拽排序的時候dom順序不斷在變化，雖然說在拖拽的時候頁面已經加載完，這點開銷不會有太大的影響，但是如果能夠做到一次拖拽只改變一次dom結構的話當然是最好的。
- 3、示例的拖拽沒有動畫效果，而且ghost跟隨給人的感覺有種很用力才能拖動，有點費勁。這個問題並不是吹毛求疵，在稍后優化后的draggable組件動畫能夠體現出來。
利用鼠標事件拖拽更流暢
- 優化之后的拖拽顯然比示例的順暢很多，不會有種吃力拖動的感覺。
- 在拖動的過程中，無論怎么拖動，變化的只是元素的translate，並沒有引起dom結構的變化，而translate並不會引起回流和重繪，而是在一次拖拽結束才進行一次更新排序。拖動過程中也能很明顯地看出當前拖拽的元素。
- 關於css影響文檔流回流和重繪可以參考https://docs.google.com/sprea...
優化思路
- 棄用html5的drag，改用mouse事件
- mousedown的時候clone當前點擊的元素為ghost並將原來的元素visibility:hidden;visibility讓原來的元素依然占據着位置，是拖拽中不改變dom的關鍵。
- 設置ghost的position為fixed，脫離文檔流，這樣無論怎么拖拽都不會影響到布局。
- 將mousemove和mouseend事件添加到window上，這樣無論鼠標怎么移動ghost都流暢跟隨。mousemove的時候判斷ghost與其他元素的位置，只使用translate去改變，直到真正拖拽結束才進行一次排序。
- 優化后的自定義ghost能讓人清晰得看到正在移動的元素。
配合vue使用的源碼：https://github.com/sally2015/...，通過v-model輕松雙向綁定數據列表
本文轉載於:猿2048→https://www.mk2048.com/blog/blog.php?id=hb21i10hjaa