資訊專欄INFORMATION COLUMN
摘要：先來看有贊做的類似的拖拽組件，它引用的庫封裝了拖拽的時候跟隨鼠標(biāo)的影子成為，是自動生成的。利用鼠標(biāo)事件拖拽更流暢優(yōu)化之后的拖拽顯然比示例的順暢很多，不會有種吃力拖動的感覺。拖動過程中也能很明顯地看出當(dāng)前拖拽的元素。
為什么棄用Html5 drag Api
之前我也用的Drag Api寫了一個draggable組件，使用起來總覺得體驗有點不好。
先來看有贊做的類似的拖拽UI組件，它引用的sortablejs庫封裝了Drag Api
1、拖拽的時候跟隨鼠標(biāo)的影子成為ghost，是Api自動生成的。但是由于這是一個很簡潔的頁面，背景全為白色在拖拽的時候其實很難看出拖到了哪里。Api雖然提供了e.dataTransfer.setDragImage(img, 0, 0)方法讓我們在去改變這個ghost，但是設(shè)置的這個img必須是HTML img element、HTML canvas element，否則它必須是一個可見的節(jié)點。簡單來說就是如果你設(shè)置的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);
這種方式好像解決了拖拽不明顯的問題，但是設(shè)置的ghost是默認(rèn)有一個透明度的，而且你沒有辦法去改變這個透明度。在上面顯示的這個頁面里面，即使是cloneNode一個元素出來跟隨鼠標(biāo)也由于這個原因有種不清晰的感覺。
2、快速拖拽的時候元素在不停的回流和重繪
從上圖可以看到在拖拽排序的時候dom順序不斷在變化，雖然說在拖拽的時候頁面已經(jīng)加載完，這點開銷不會有太大的影響，但是如果能夠做到一次拖拽只改變一次dom結(jié)構(gòu)的話當(dāng)然是最好的。
3、示例的拖拽沒有動畫效果，而且ghost跟隨給人的感覺有種很用力才能拖動，有點費勁。這個問題并不是吹毛求疵，在稍后優(yōu)化后的draggable組件動畫能夠體現(xiàn)出來。
利用鼠標(biāo)事件拖拽更流暢優(yōu)化之后的拖拽顯然比示例的順暢很多，不會有種吃力拖動的感覺。
在拖動的過程中，無論怎么拖動，變化的只是元素的translate，并沒有引起dom結(jié)構(gòu)的變化，而translate并不會引起回流和重繪，而是在一次拖拽結(jié)束才進行一次更新排序。拖動過程中也能很明顯地看出當(dāng)前拖拽的元素。
關(guān)于css影響文檔流回流和重繪可以參考https://docs.google.com/sprea...
優(yōu)化思路棄用html5的drag，改用mouse事件
mousedown的時候clone當(dāng)前點擊的元素為ghost并將原來的元素visibility:hidden;visibility讓原來的元素依然占據(jù)著位置，是拖拽中不改變dom的關(guān)鍵。
設(shè)置ghost的position為fixed，脫離文檔流，這樣無論怎么拖拽都不會影響到布局。
將mousemove和mouseend事件添加到window上，這樣無論鼠標(biāo)怎么移動ghost都流暢跟隨。mousemove的時候判斷ghost與其他元素的位置，只使用translate去改變，直到真正拖拽結(jié)束才進行一次排序。
優(yōu)化后的自定義ghost能讓人清晰得看到正在移動的元素。
配合vue使用的源碼：https://github.com/sally2015/...，通過v-model輕松雙向綁定數(shù)據(jù)列表
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93835.html
摘要：主機接入新表格組件支持拖拽調(diào)整表頭列寬背景現(xiàn)狀客戶對于主機名稱的命名規(guī)則廠商地域可用區(qū)產(chǎn)品業(yè)務(wù)服務(wù)內(nèi)網(wǎng)，名稱較長，無法在列表頁直觀展示，只能手動上去顯示全部。如有關(guān)于控制臺產(chǎn)品的前端及視覺優(yōu)化建議也歡迎和我們部門同學(xué)反饋。2月份根據(jù)用戶反饋、用戶調(diào)研以及自身使用產(chǎn)品體驗，將主機列為重點體驗優(yōu)化目標(biāo)產(chǎn)品，主要針對如下業(yè)務(wù)場景進行了優(yōu)化：主機創(chuàng)建頁可用區(qū)售罄地域切換優(yōu)化主機列表頁主機接入新表格組...
摘要：移動的過程中可以通過拿到元素的坐標(biāo)，記為。向上滾動放大，向下滾動縮小這里要注意控制最小縮放值。還要注意的是圖片在邊界的縮放，不然圖片可能會移動在屏幕外。代碼實現(xiàn)控制滾輪縮放計算縮放后的大小每一次滾輪限制最小不讓由于縮小消失在視野中 cxj-react-image 用法如下： yarn add cxj-react-image // npm i cxj-react-image import...
摘要：新特性性能提升通過對組件渲染的優(yōu)化以及內(nèi)部算法的優(yōu)化，把大量的遍歷和渲染都省掉。新特性不一樣的掛件渲染依賴注入式的掛件可以從最簡單的例子看出，我們渲染子組件的方式和以往有些不同。通過獲取組件的實例，我提供了一個，用于獲取當(dāng)前的布局信息。 showImg(https://segmentfault.com/img/remote/1460000013377768?w=600&h=375); ...
摘要：新特性性能提升通過對組件渲染的優(yōu)化以及內(nèi)部算法的優(yōu)化，把大量的遍歷和渲染都省掉。新特性不一樣的掛件渲染依賴注入式的掛件可以從最簡單的例子看出，我們渲染子組件的方式和以往有些不同。通過獲取組件的實例，我提供了一個，用于獲取當(dāng)前的布局信息。 showImg(https://segmentfault.com/img/remote/1460000013377768?w=600&h=375); ...
閱讀 2566·2023-04-26 01:44
閱讀 2577·2021-09-10 10:50
閱讀 1420·2019-08-30 15:56
閱讀 2287·2019-08-30 15:44
閱讀 525·2019-08-29 11:14
閱讀 3429·2019-08-26 11:56
閱讀 3025·2019-08-26 11:52
閱讀 921·2019-08-26 10:27
