前端拖拽組件優化

mykurisu 發布于2019-08-22 15:53 / 3489人閱讀

摘要：先來看有贊做的類似的拖拽組件，它引用的庫封裝了拖拽的時候跟隨鼠標的影子成為，是自動生成的。利用鼠標事件拖拽更流暢優化之后的拖拽顯然比示例的順暢很多，不會有種吃力拖動的感覺。拖動過程中也能很明顯地看出當前拖拽的元素。

為什么棄用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輕松雙向綁定數據列表

GPU云服務器云服務器拖拽組件組件拖拽前端組件前端組件維護

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93835.html

UCloud控制臺產品升級！

摘要：主機接入新表格組件支持拖拽調整表頭列寬背景現狀客戶對于主機名稱的命名規則廠商地域可用區產品業務服務內網，名稱較長，無法在列表頁直觀展示，只能手動上去顯示全部。如有關于控制臺產品的前端及視覺優化建議也歡迎和我們部門同學反饋。2月份根據用戶反饋、用戶調研以及自身使用產品體驗，將主機列為重點體驗優化目標產品，主要針對如下業務場景進行了優化：主機創建頁可用區售罄地域切換優化主機列表頁主機接入新表格組...

ernest.wang 2022-07-02 18:40 評論0 收藏0
多功能React影像組件(拖拽、水印、縮放、切換、旋轉)

摘要：移動的過程中可以通過拿到元素的坐標，記為。向上滾動放大，向下滾動縮小這里要注意控制最小縮放值。還要注意的是圖片在邊界的縮放，不然圖片可能會移動在屏幕外。代碼實現控制滾輪縮放計算縮放后的大小每一次滾輪限制最小不讓由于縮小消失在視野中 cxj-react-image 用法如下： yarn add cxj-react-image // npm i cxj-react-image import...

soasme 2019-08-23 13:56 評論0 收藏0
React組件：拖拽布局Dragact v0.1.6 發布

摘要：新特性性能提升通過對組件渲染的優化以及內部算法的優化，把大量的遍歷和渲染都省掉。新特性不一樣的掛件渲染依賴注入式的掛件可以從最簡單的例子看出，我們渲染子組件的方式和以往有些不同。通過獲取組件的實例，我提供了一個，用于獲取當前的布局信息。 showImg(https://segmentfault.com/img/remote/1460000013377768?w=600&h=375); ...

since1986 2019-08-01 18:38 評論0 收藏0
React組件：拖拽布局Dragact v0.1.6 發布

摘要：新特性性能提升通過對組件渲染的優化以及內部算法的優化，把大量的遍歷和渲染都省掉。新特性不一樣的掛件渲染依賴注入式的掛件可以從最簡單的例子看出，我們渲染子組件的方式和以往有些不同。通過獲取組件的實例，我提供了一個，用于獲取當前的布局信息。 showImg(https://segmentfault.com/img/remote/1460000013377768?w=600&h=375); ...

caozhijian 2019-08-22 14:50 評論0 收藏0