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