vue 拖拽问题，点击空白处不能再次拖拽。

Question

问题遇到的现象和发生背景

  dierleft() {
                var divd = document.getElementById("initsju1");
                // var width = divd.clientWidth || divd.offsetWidth;   //边框的宽度
                // console.log('fgg', width)
                var divs = document.getElementById("inintIjm"); //拖拽的img
                onmousedown = (ev) => {
                    //获取鼠标按下的坐标
                    var x1 = ev.clientX;

                    // 获取元素的left，top值
                    var l = divs.offsetLeft;
                    // 获取元素的宽度值
                    let width = divd.offsetWidth
                    // var t = divs.offsetTop;
                    //给可视区域添加鼠标的移动事件
                    document.onmousemove = function (ev) {

                        //获取鼠标移动时的坐标
                        var x2 = ev.clientX;

                        //计算出鼠标的移动距离
                        var x = x2 - x1;
                        var y = x2 - x1;
                        console.log(y, '便宜量')
                        //移动的数值与元素的left，top相加，得出元素的移动的距离
                        // var lt = y + t;
                        var ls = x + l;
                        var lst = x - y;
                        console.log(((lst + parseInt(width)) - lst) + x, 'width')
                        //更改元素的left，top值
                        // divs.style.top = lt + 'px';
                        divd.style.width = ((lst + parseInt(width)) - lst) + x + "px";
                        divs.style.left = ls + 'px';
                        // divs.style.width = lst + parseInt(width) + 'px';
                    }
                    //清除
                    document.onmouseup = function (ev) {
                        console.log('事件清楚');
                        document.onmousemove = null;
                        document.onmouseup = null;

                    }
                }
            },

问题相关代码，请勿粘贴截图

无法取消拖拽效果

我想要达到的结果

点击空白处不能实现拖拽

Answer 1

你可以定义一个变量来判断是否开启监听鼠标移动,你在开始定义一个isMove=true,即在onmousemove的处理函数中,你先判断isMove是否为true,再执行后续的操作,当你的鼠标弹起事件触发时,你将isMove赋值为false即可

还有就是你绑定事件的方式我不推荐这么写
你应该用

//绑定事件监听
document.addEventListener('mousemove',mouseMoveFn)
 function mouseMoveFn() {
                
  }
//移除事件监听
  document.removeEventListener('mousemove',mouseMoveFn);