vue自定义指令实现元素拖拽功能

创建directive.js文件

import Vue from 'vue';
export const drap = Vue.directive('drap', {
    bind(el, binding) {
        el.onmousedown = function (e) {
            console.log("开始拖动");
            let odiv = e.target;// 获取目标元素
            let disX = e.clientX - el.offsetLeft;
            let disY = e.clientY - el.offsetTop;
            document.onmousemove = function (e) {
                console.log("拖动中");
                let left = e.clientX - disX
                let top = e.clientY - disY;
                if (left <= 0) {
                    left = 0;
                } else if (left >= document.documentElement.clientWidth - odiv.offsetWidth){
                    left = document.documentElement.clientWidth - odiv.offsetWidth;
                }

                if (top <= 0) {
                    top = 0;
                } else if (top >= document.documentElement.clientHeight - odiv.offsetHeight){
                    top = document.documentElement.clientHeight - odiv.offsetHeight

                }
                el.style.left = left + "px";
                el.style.top = top + "px";
            };
            document.onmouseup = function () {
                document.onmousemove = null;
                console.log("拖动结束");
            };
            return false;
        }
    }
});

在main.js引入directive文件

import directive from './utils/directive'
Vue.use(directive)

最后在页面中使用就可以了

<el-button class="filter-item" type="primary" v-drap >搜索</el-button>