基于Vue.js 實現簡易拖拽指令

更新時間：2024年04月02日 14:28:23 作者：林間有風H

在 Vue.js 中,我們可以通過自定義指令的方式來實現拖拽功能,使得代碼更加模塊化和可復用,本文將介紹如何基于 Vue.js 實現一個簡易的拖拽指令,感興趣的朋友跟隨小編一起看看吧

基于 Vue.js 實現簡易拖拽指令

在 Web 開發(fā)中，拖拽功能是一項常見而又實用的功能。無論是制作網頁游戲、實現可拖拽的組件，還是簡單的頁面布局調整，都可能用到拖拽功能。在 Vue.js 中，我們可以通過自定義指令的方式來實現拖拽功能，使得代碼更加模塊化和可復用。本文將介紹如何基于 Vue.js 實現一個簡易的拖拽指令。

1. 簡介

拖拽功能的實現原理主要是通過鼠標事件（mousedown、mousemove、mouseup）來控制被拖拽元素的位置。我們需要監(jiān)聽鼠標按下事件，計算鼠標按下位置與被拖拽元素的偏移量，然后在鼠標移動事件中根據鼠標位置不斷更新被拖拽元素的位置，最后在鼠標抬起事件中清除事件監(jiān)聽器。

2. 實現

我們首先定義一個 Vue 指令，命名為 drag。指令的作用是使元素可拖拽。

function updateElVisible(el, binding) {
    el.style.cursor = 'move';
    el.onmousedown = function (e) {
        const disx = e.pageX - el.offsetLeft;
        const disy = e.pageY - el.offsetTop;
        const maxX = document.body.clientWidth - parseInt(window.getComputedStyle(el).width);
        const maxY = document.body.clientHeight - parseInt(window.getComputedStyle(el).height);
        document.onmousemove = function (e) {
            let x = e.pageX - disx;
            let y = e.pageY - disy;
            x = Math.min(Math.max(x, 0), maxX);
            y = Math.min(Math.max(y, 0), maxY);
            console.log(x,'xx')
            el.style.left = x + 'px';
            el.style.top = y + 'px';
        };
        document.onmouseup = function () {
            document.onmousemove = document.onmouseup = null;
        };
    };
}
const hasDrag = {
    mounted(el, binding) {
        updateElVisible(el, binding);
    },
    beforeUpdate(el, binding) {
        updateElVisible(el, binding);
    }
};
export default  {
    install(Vue) {
         Vue.directive('drag', hasDrag);
    }
};

3. 使用方法

在 Vue 組件中使用 v-drag 指令即可使元素可拖拽。

main.js
import DragDirective from './utils/drag'
.....
app.use(DragDirective)

<template>
  <div v-drag style="width: 100px; height: 100px; background-color: #f0f0f0; position: absolute; left: 0; top: 0;">
    拖拽我
  </div>
</template>