vue中实现任意拖拽，可直接复制使用

适用场景

右下角的客服图标，或者页面的固定元素，可以通过拖动移到任意位置。

实现过程

以下代码在vue中可以直接复制使用

// 自定义指令 v-drag
 <div v-drag>被拖拽的元素</div>

 methods: {}，
 directives: {
        drag: {
            // 指令的定义
            inserted: function (el) {
                let x = 0;
                let y = 0;
                let l = 0;
                let t = 0;
                let isDown = false;
                //鼠标按下事件
                el.onmousedown = function (e) {
                    //获取x坐标和y坐标
                    x = e.clientX;
                    y = e.clientY;

                    //获取左部和顶部的偏移量
                    l = el.offsetLeft;
                    t = el.offsetTop;
                    //开关打开
                    isDown = true;
                    //设置样式
                    el.style.cursor = "move";
                };
                //鼠标移动
                window.onmousemove = function (e) {
                    if (isDown == false) {
                        return;
                    }
                    //获取x和y
                    let nx = e.clientX;
                    let ny = e.clientY;
                    //计算移动后的左偏移量和顶部的偏移量
                    let nl = nx - (x - l);
                    let nt = ny - (y - t);

                    el.style.left = nl + "px";
                    el.style.top = nt + "px";
                };
                //鼠标抬起事件
                el.onmouseup = function () {
                    //开关关闭
                    isDown = false;
                    el.style.cursor = "default";
                };
            }
        }
    },