Vue3设置video标签可拖动，任意元素可拖动

ymktchic

已于 2022-12-21 10:01:01 修改

阅读量732

点赞数

文章标签： javascript 前端开发语言

于 2022-12-09 14:35:58 首次发布

本文链接：https://blog.csdn.net/m0_48230043/article/details/128252695

版权


  const  down=(event)=> {
    event.preventDefault()
    event.stopPropagation();
    
    let moveDiv=document.getElementById('hello')
      state.flag = true;
      var touch;
      if (event.touches) {
        touch = event.touches[0];
      } else {
        touch = event;
      }
      state.position.x = touch.clientX;
      state.position.y = touch.clientY;
      state.dx = moveDiv.offsetLeft;
      state.dy = moveDiv.offsetTop;
    }
  const   move=(event)=> {
    let moveDiv=document.getElementById('hello')

      if ( state.flag) {
       let touch;
       moveDiv.style.cursor='pointer'
        if (event.touches) {
          touch = event.touches[0];
        } else {
          touch = event;
        }
        state.nx = touch.clientX - state.position.x;
        state.ny = touch.clientY - state.position.y;
        state.xPum = state.dx + state.nx;
        state.yPum = state.dy + state.ny;
        moveDiv.style.left = state.xPum + "px";
        moveDiv.style.top = state.yPum + "px";
        //阻止页面的滑动默认事件；如果碰到滑动问题，1.2 请注意是否获取到 touchmove
        document.addEventListener("touchmove", function (event) {
          event.preventDefault();
        }, false);
        console.log('222');
      }
    }
    //鼠标释放时候的函数
   const   end=(event)=>{
      state.flag = false;
    }

  
  <div  id="hello" class="hello" @mousedown="down" @touchstart="down" @mousemove="move"
      @touchmove="move" @mouseup="end" @touchend="end" >
</div>