vue 封装拖动指令（局部div及整体div）

1.封装一个给整体div 拖动效果的指令：

const drag  = {
    inserted: function (el) {
        el.style.cursor = 'move'
        el.onmousedown = function (e) {
            let disx = e.pageX - el.offsetLeft
            let disy = e.pageY - el.offsetTop
            document.onmousemove = function (e) {
                let x = e.pageX - disx
                let y = e.pageY - disy
                let maxX = document.body.clientWidth - parseInt(window.getComputedStyle(el).width)
                let maxY = document.body.clientHeight - parseInt(window.getComputedStyle(el).height)
                if (x < 0) {
                    x = 0
                } else if (x > maxX) {
                    x = maxX
                }

                if (y < 0) {
                    y = 0
                } else if (y > maxY) {
                    y = maxY
                }

                el.style.left = x + 'px'
                el.style.top = y + 'px'
            }
            document.onmouseup = function () {
                document.onmousemove = document.onmouseup = null
            }
        }
    },
}
export default drag

给整体绑定指令v-drag效果图：

2.封装一个局部div带动整体div移动的指令,超出头部div时移动不了整体div

const dragDiv = {
    inserted: function (el) {
        el.style.cursor = 'move'
        //获取拖动时移动的元素（父div）
        let p_el = el.parentElement;
        //添加鼠标按下监听事件
        el.addEventListener('mousedown', function (e) {
            var disx = e.pageX - p_el.offsetLeft;
            var disy = e.pageY - p_el.offsetTop;

            document.onmousemove = function (e) {
                p_el.style.left = e.pageX - disx + 'px';
                p_el.style.top = e.pageY - disy + 'px';
                el.style.cursor = 'grabbing';
            }
            document.onmouseup = function () {
                document.onmousemove = document.onmouseup = null;
                el.style.cursor = 'grab';
            }
        }, true);
    },
}
export default dragDiv 

效果如下：

参考点击子元素可移动整体元素(子div带动父div移动)_点击内部子元素,父盒子无法头拽_我要吃豆沙包的博客-CSDN博客