基于Vue 擼一個(gè)指令實(shí)現(xiàn)拖拽功能
之前擼了一個(gè)copy 指令,這次再擼一個(gè)拖拽指令。。
具體是個(gè)什么蛇皮玩意兒呢,大概就像介樣:
emmm。。沒錯(cuò),看起來(lái)就是如此的雞肋,但是莫得辦法,大佬喜歡啊。
由于我們項(xiàng)目中用的是 element-ui ,所有這個(gè)指令只針對(duì) element-ui 的對(duì)話框組件哈,如果你們用的別的 ui 庫(kù)也有這個(gè)需求的,涂涂改改應(yīng)該也能用。。
其實(shí)這個(gè)拖拽的原理還是很簡(jiǎn)單的:
1.首先鼠標(biāo)按下( onmousedown )
- 記錄目標(biāo)元素當(dāng)前的 left 和 top 值
2.鼠標(biāo)移動(dòng)( onmousemove )
- 計(jì)算每次移動(dòng)的橫向距離 ( disX ) 和縱向距離 ( disY )
- 并改變?cè)氐?left ( left = left + disX )和 top ( top = top + disY )值
3.鼠標(biāo)松開( onmouseup )
完成一次拖拽,做一些收尾工作
- left 和 top 值容易獲取,關(guān)鍵是 disX 和 disY 怎么計(jì)算呢?
容我先普及一哈:
- clientX :表示鼠標(biāo)當(dāng)前的 X 坐標(biāo)
- clientY :表示鼠標(biāo)當(dāng)前的 Y 坐標(biāo)
那么偽代碼就是:
- disX = 鼠標(biāo)按下時(shí)的 clientX - 鼠標(biāo)松開時(shí)的 clientX
- disY = 鼠標(biāo)按下時(shí)的 clientY - 鼠標(biāo)松開時(shí)的 clientY
就這么簡(jiǎn)單,好了,下面就開始擼代碼了。
// 這個(gè)助手方法下面會(huì)用到,用來(lái)獲取 css 相關(guān)屬性值 const getAttr = (obj, key) => ( obj.currentStyle ? obj.currentStyle[key] : window.getComputedStyle(obj, false)[key] ); const vDrag = { inserted(el) { /** * 這里是跟據(jù) dialog 組件的 dom 結(jié)構(gòu)來(lái)寫的 * target: dialog 組件的容器元素 * header:dialog 組件的頭部區(qū)域,也是就是拖拽的區(qū)域 */ const target = el.children[0]; const header = target.children[0]; // 鼠標(biāo)手型 header.style.cursor = 'move'; header.onmousedown = (e) => { // 記錄按下時(shí)鼠標(biāo)的坐標(biāo)和目標(biāo)元素的 left、top 值 const currentX = e.clientX; const currentY = e.clientY const left = parseInt(getAttr(target, 'left')); const top = parseInt(getAttr(target, 'top')); document.onmousemove = (event) => { // 鼠標(biāo)移動(dòng)時(shí)計(jì)算每次移動(dòng)的距離,并改變拖拽元素的定位 const disX = event.clientX - currentX; const disY = event.clientY - currentY; target.style.left = `${left + disX}px`; target.style.top = `${top + disY}px`; // 阻止事件的默認(rèn)行為,可以解決選中文本的時(shí)候拖不動(dòng) return false; } // 鼠標(biāo)松開時(shí),拖拽結(jié)束 document.onmouseup = () => { document.onmousemove = null; document.onmouseup = null; }; } }, // 每次重新打開 dialog 時(shí),要將其還原 update(el) { const target = el.children[0]; target.style.left = ''; target.style.top = ''; }, // 最后卸載時(shí),清除事件綁定 unbind(el) { const header = el.children[0].children[0]; header.onmousedown = null; }, }; export default vDrap;
這樣就實(shí)現(xiàn)了 最簡(jiǎn)單 的拖拽了,這樣就 ok 了嗎? 當(dāng)然不是,這樣會(huì)有什么問題呢?就是如果用力過(guò)猛把整個(gè)彈框都拖到可視區(qū)域之外了,那就摳不出來(lái)了。
所以還得完善一下,判斷四個(gè)方向的邊界,如果超過(guò)邊界值就不動(dòng)了。邊界值實(shí)際上就是在屏幕上能拖動(dòng)的最大距離也就是 disX 和 disY 的最大值
- 上邊界: target.offsetTop
- offsetTop :這里可以表示目標(biāo)元素( target )上邊框距離頁(yè)面頂部的距離
- 下邊界: body.height - target.offsetTop - header.height
- header.height :預(yù)留高度,表示往下可以拖到只留下可拖拽區(qū)域在外面
- 左邊界: target.offsetLeft + target.width - 50
- offsetLeft :這里可以表示目標(biāo)元素左邊框距離頁(yè)面左邊的距離
- 50 :表示預(yù)留的寬度,可以自己隨便定只要大于 0 即可,表示往左再怎么拖也會(huì)留下 50px 的寬度在外面
- 右邊界: body.width - target.offsetLeft - 50
這里 50 同上,表示往左再怎么拖也會(huì)留下 50px 的寬度在外面
這里計(jì)算邊界值的方法有多種,大家可以去嘗試自己的想法。然后我粗略的畫了一個(gè)圖,幫助理解,雖然感覺只有我自己看得懂。哈哈。。。
下面用代碼實(shí)現(xiàn)邊界判斷就 ok了
// ... // 以上代碼省略 header.onmousedown = (e) => { // ... // 以上代碼省略 // 分別計(jì)算四個(gè)方向的邊界值 const minLeft = target.offsetLeft + parseInt(getAttr(target, 'width')) - 50; const maxLeft = parseInt(getAttr(document.body, 'width')) - target.offsetLeft - 50; const minTop = target.offsetTop; const maxTop = parseInt(getAttr(document.body, 'height')) - target.offsetTop - parseInt(getAttr(header, 'height')); document.onmousemove = (event) => { // 鼠標(biāo)移動(dòng)時(shí)計(jì)算每次移動(dòng)的距離,并改變拖拽元素的定位 const disX = event.clientX - currentX; const disY = event.clientY - currentY; // 判斷左、右邊界 if (disX < 0 && disX <= -minLeft) { target.style.left = `${left - minLeft)}px`; } else if (disX > 0 && disX >= maxLeft) { target.style.left = `${left + maxLeft}px`; } else { target.style.left = `${left + disX}px`; } // 判斷上、下邊界 if (disY < 0 && disY <= -minTop) { target.style.top = `${top - minTop)}px`; } else if (disY > 0 && disY >= maxTop) { target.style.top = `${top + maxTop}px`; } else { target.style.top = `${top + disY}px`; } return false; }; }
這樣注冊(cè)之后就可以使用了:
<el-dialog v-drag title="對(duì)話框" :visible.sync="dialogVisible"></el-dialog>
總結(jié)
以上所述是小編給大家介紹的Vue 指令實(shí)現(xiàn)拖拽功能,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
十個(gè)有用的自定義Vue鉤子函數(shù)總結(jié)
這篇文章主要為大家介紹了十個(gè)Vue.js中有用的自定義鉤子,讓我們的代碼更加好看。文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2022-04-04使用jenkins一鍵打包發(fā)布vue項(xiàng)目的實(shí)現(xiàn)
這篇文章主要介紹了使用jenkins一鍵打包發(fā)布vue項(xiàng)目的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05Vue 通過(guò)自定義指令回顧v-內(nèi)置指令(小結(jié))
這篇文章主要介紹了Vue 通過(guò)自定義指令回顧v-內(nèi)置指令(小結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09