美文网首页
vue拖拽事件和单击事件冲突处理

vue拖拽事件和单击事件冲突处理

作者: O槑頭槑腦 | 来源:发表于2019-11-14 20:58 被阅读0次
    //拖拽
    let dv =  document.getElementsById('')
        drag(dv) {
          //获取元素
          let x = 0
          let y = 0
          let l = 0
          let t = 0
          let isDown = false
          let firstTime='',lastTime=''
          //鼠标按下事件
          dv.onmousedown = (e) => {
            //获取x坐标和y坐标
            x = e.clientX;
            y = e.clientY;
            //获取左部和顶部的偏移量
            l = dv.offsetLeft;
            t = dv.offsetTop;
            //开关打开
            isDown = true;
            //设置样式
            dv.style.cursor = "move";
            firstTime = new Date().getTime()
          };
          //鼠标移动
          window.onmousemove = (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);
    
            nt <= 0 ? (nt = 0) : nt;
    
            let wheight = document.body.offsetHeight;
            let dheight = dv.offsetHeight;
            if (nt >= wheight - dheight) {
              nt = wheight - dheight;
            }
            // dv.style.left = nl + 'px';
            dv.style.top = nt + "px";
          };
          //鼠标抬起事件
          dv.onmouseup = () =>{
            //开关关闭
            isDown = false;
            dv.style.cursor = "default";
            lastTime = new Date().getTime()
            if( (lastTime - firstTime) < 200){
                // 处理单击事件
            }
          };
        }
    

    相关文章

      网友评论

          本文标题:vue拖拽事件和单击事件冲突处理

          本文链接:https://www.haomeiwen.com/subject/tpsdictx.html