資訊專(zhuān)欄INFORMATION COLUMN
摘要：涉及部分的，不會(huì)對(duì)理解全局產(chǎn)生干擾。在上監(jiān)聽(tīng)事件，當(dāng)為畫(huà)布時(shí)，通過(guò)創(chuàng)建一個(gè)藍(lán)色虛線框移動(dòng)的時(shí)候，更新的位置在上監(jiān)聽(tīng)事件，落在畫(huà)布時(shí)，創(chuàng)建一個(gè)的節(jié)點(diǎn)從而完成整個(gè)拖拽添加元素的功能。
拖拽操作平時(shí)用的比較少，在最近的一個(gè)項(xiàng)目中使用到了，并且踩了一些坑，本文做一個(gè)簡(jiǎn)單的總結(jié)。涉及部分G6的API，不會(huì)對(duì)理解全局產(chǎn)生干擾。需求概述
如下圖所示，左側(cè)為GGEditor元素面板React組件，右側(cè)為G6畫(huà)布，現(xiàn)需要將元素從「元素面板」中拖拽到「畫(huà)布」上。要求：
拖拽時(shí)藍(lán)色虛線框和元素面板的對(duì)應(yīng)元素尺寸相同（為一矩形）
藍(lán)色虛線框跟隨鼠標(biāo)移動(dòng)，指明當(dāng)前拖拽的位置
元素面板上對(duì)應(yīng)元素不應(yīng)發(fā)生改變
??圖中的黑色圓圈僅為錄屏軟件指明鼠標(biāo)操作提示
拖拽方法總結(jié)相較于大部分DOM操作只需要監(jiān)聽(tīng)某一種事件，原生拖拽功能的實(shí)現(xiàn)通常需要監(jiān)聽(tīng)全部或部分的下述事件：
| 事件 | event.target | 觸發(fā)時(shí)機(jī) |
|---|---|---|
| drag | 被拖動(dòng)元素 | 拖拽中（每幾百毫秒觸發(fā)一次） |
| dragstart | 被拖動(dòng)元素 | 剛開(kāi)始拖拽 |
| dragend | 被拖動(dòng)元素 | 拖拽結(jié)束（鼠標(biāo)釋放或esc） |
| dragover | 被拖動(dòng)元素下方元素 | 拖拽到某一目標(biāo)上時(shí)（每幾百毫秒一次） |
| dragenter | 被拖動(dòng)元素下方元素 | 被拖動(dòng)元素進(jìn)入可釋放處時(shí) |
| dragleave | 被拖動(dòng)元素下方元素 | 拖拽離開(kāi)某一目標(biāo)時(shí) |
| drop | 被拖動(dòng)元素下方元素 | 同dragend 且在其之前觸發(fā) |
實(shí)現(xiàn)之前，有幾個(gè)踩坑點(diǎn)先說(shuō)明：
不能將左側(cè)面板的元素設(shè)置為draggable，因?yàn)樵献ё詭ш幱靶Ч缦聢D。
很明顯這不是我們要的效果。
拖拽時(shí)的藍(lán)色虛線框應(yīng)該由G6繪制成一個(gè)canvas的元素，因?yàn)楫?huà)布可以放大或縮小，這個(gè)虛線框應(yīng)和實(shí)際放在畫(huà)布上的元素尺寸相同而不是左側(cè)面板的元素尺寸相同。（不了解G6的同學(xué)自行忽略）
思路拖拽開(kāi)始或鼠標(biāo)落下時(shí)，創(chuàng)建一個(gè)和元素大小寬高相同的透明度為0的矩形shadowShape，并監(jiān)聽(tīng)其drag，mouseup事件。
在document上監(jiān)聽(tīng)dragenter事件，當(dāng)target為畫(huà)布時(shí)，通過(guò)G6api創(chuàng)建一個(gè)藍(lán)色虛線框dragShape
shadowShape移動(dòng)的時(shí)候，更新dragShape的位置
在document上監(jiān)聽(tīng)drop事件，落在畫(huà)布時(shí)，創(chuàng)建一個(gè)G6的節(jié)點(diǎn)從而完成整個(gè)拖拽添加元素的功能。
??踩坑點(diǎn)：必須要阻止dragover的默認(rèn)行為，保證drop的正常觸發(fā)，參考這則問(wèn)答
總結(jié)1 相較于上個(gè)版本的GGEditor，實(shí)現(xiàn)了拖拽功能的連續(xù)性。之前，鼠標(biāo)即使保持按下，一旦移出畫(huà)布，就終止了本次的拖拽過(guò)程。
上個(gè)版本的GGEditor
2 待優(yōu)化點(diǎn)：
由于藍(lán)色虛線框是G6畫(huà)布上的元素，能夠根據(jù)G6的縮放比例自動(dòng)調(diào)整大小，所以在其他地方的拖拽過(guò)程不易做出類(lèi)似的虛線框，體驗(yàn)上有間斷感
當(dāng)前代碼在一個(gè)react組件里操作了大量的原生事件監(jiān)聽(tīng)，不夠React，考慮之后直接開(kāi)發(fā)一個(gè)新的組件，使用React的合成事件來(lái)重寫(xiě)。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/54079.html
摘要：涉及部分的，不會(huì)對(duì)理解全局產(chǎn)生干擾。在上監(jiān)聽(tīng)事件，當(dāng)為畫(huà)布時(shí)，通過(guò)創(chuàng)建一個(gè)藍(lán)色虛線框移動(dòng)的時(shí)候，更新的位置在上監(jiān)聽(tīng)事件，落在畫(huà)布時(shí)，創(chuàng)建一個(gè)的節(jié)點(diǎn)從而完成整個(gè)拖拽添加元素的功能。 showImg(https://segmentfault.com/img/remote/1460000019564977);showImg(https://segmentfault.com/img/remot...
摘要：案例說(shuō)明使用原生完成桌面操作級(jí)應(yīng)用，對(duì)于原生的掌握情況而言，是一個(gè)較為全面的綜合型案例。本次課從事件相關(guān)的功能入手，給大家?guī)?lái)詳細(xì)的分享。 showImg(https://segmentfault.com/img/bVbh1qw); 案例說(shuō)明：使用原生 JS 完成桌面操作級(jí)應(yīng)用，對(duì)于原生 JS 的掌握情況而言，是一個(gè)較為全面的綜合型案例。本次課從事件（event）相關(guān)的功能入手，給大家...
摘要：原生實(shí)現(xiàn)對(duì)元素的拖拽一背景介紹此處為鋪墊內(nèi)容，可跳過(guò)隨著前端的不斷發(fā)展，各種各樣的前端規(guī)范和新知識(shí)新技術(shù)層出不窮，極大地拓展了開(kāi)發(fā)者的操作空間，也大大地提升了用戶體驗(yàn)。 原生 JS 實(shí)現(xiàn)對(duì) html 元素的拖拽 一、背景介紹 【此處為鋪墊內(nèi)容，可跳過(guò)】 隨著 Web 前端的不斷發(fā)展，各種各樣的前端規(guī)范和新知識(shí)、新技術(shù)層出不窮，極大地拓展了開(kāi)發(fā)者的操作空間，也大大地提升了用戶體驗(yàn)。而隨著...
摘要：原生實(shí)現(xiàn)對(duì)元素的拖拽一背景介紹此處為鋪墊內(nèi)容，可跳過(guò)隨著前端的不斷發(fā)展，各種各樣的前端規(guī)范和新知識(shí)新技術(shù)層出不窮，極大地拓展了開(kāi)發(fā)者的操作空間，也大大地提升了用戶體驗(yàn)。 原生 JS 實(shí)現(xiàn)對(duì) html 元素的拖拽 一、背景介紹 【此處為鋪墊內(nèi)容，可跳過(guò)】 隨著 Web 前端的不斷發(fā)展，各種各樣的前端規(guī)范和新知識(shí)、新技術(shù)層出不窮，極大地拓展了開(kāi)發(fā)者的操作空間，也大大地提升了用戶體驗(yàn)。而隨著...
閱讀 3889·2021-09-27 13:36
閱讀 4612·2021-09-22 15:12
閱讀 3070·2021-09-13 10:29
閱讀 1840·2021-09-10 10:50
閱讀 2371·2021-09-03 10:43
閱讀 528·2019-08-29 17:10
閱讀 451·2019-08-26 13:52
閱讀 3263·2019-08-23 14:37
