再擼一個 Vue 指令實現拖拽功能

以前擼了一個 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) {
      /** * 這裏是跟據 dialog 組件的 dom 結構來寫的 * target: dialog 組件的容器元素 * header：dialog 組件的頭部區域，也是就是拖拽的區域 */
        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；
            }
            
            // 鼠標鬆開時，拖拽結束
            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;
複製代碼

這樣就實現了最簡單的拖拽了，這樣就 ok 了嗎？ 固然不是，這樣會有什麼問題呢？就是若是用力過猛把整個彈框都拖到可視區域以外了，那就摳不出來了。

因此還得完善一下，判斷四個方向的邊界，若是超過邊界值就不動了。邊界值實際上就是在屏幕上能拖動的最大距離也就是 disX 和 disY 的最大值

• 上邊界：target.offsetTop
  • offsetTop：這裏能夠表示目標元素（target）上邊框距離頁面頂部的距離
• 下邊界：body.height - target.offsetTop - header.height
  • header.height：預留高度，表示往下能夠拖到只留下可拖拽區域在外面
• 左邊界：target.offsetLeft + target.width - 50
  • offsetLeft：這裏能夠表示目標元素左邊框距離頁面左邊的距離
  • 50：表示預留的寬度，能夠本身隨便定只要大於 0 便可，表示往左再怎麼拖也會留下 50px 的寬度在外面
• 右邊界：body.width - target.offsetLeft - 50
  • 這裏 50 同上，表示往左再怎麼拖也會留下 50px 的寬度在外面

這裏計算邊界值的方法有多種，你們能夠去嘗試本身的想法。而後我粗略的畫了一個圖，幫助理解，雖然感受只有我本身看得懂。哈哈。。。

下面用代碼實現邊界判斷就 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>
複製代碼

這裏就不介紹指令的鉤子函數以及如何全局註冊了，感興趣的能夠看看我上一篇文章。