使用vue自定义指令directive写一个div移动指令

使用vue自定义指令directive写一个div移动指令

1、在src/utils目录创建drag.js文件。在注册指令名称时不需要‘v-’；

import Vue from 'vue'

Vue.directive('drag', {
    bind(el,binding){

        // 鼠标是否按下
        let dragging = false;
        // 鼠标距离当前元素的x轴向距离
        let offsetX = 0;
        // 鼠标距离当前元素的y轴距离
        let offsetY = 0;
        // drag样式
        let dratStyle = {
            left: 0,
            top: 0,
        }

        // 鼠标按钮下
        el.onmousedown = function (e){
            dragging = true;
            offsetX = e.pageX - dratStyle.left; // 结果是鼠标距离元素的x轴位置
            offsetY = e.pageY - dratStyle.top; // 结果是鼠标距离元素的y轴位置
        }

        // 鼠标抬起
        el.onmouseup = function(e){
            dragging = false;
        }

        // 鼠标移动
        document.onmousemove = function(e){
            if (dragging){
                dratStyle.left = e.pageX - offsetX;
                dratStyle.top = e.pageY - offsetY;
                el.style.left = dratStyle.left + 'px';
                el.style.top = dratStyle.top + 'px';
            }
        }

    }
})

2、在min.js里引入指令

import '@/utils/drag.js'

3、在组件中使用

<div class="drag" v-drag>
	<div class="header">拖拽框</div>
</div>