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