vueusejs实现拖动

https://www.vueusejs.com/guide/

 

npm i -D @vueuse/nuxt @vueuse/core

pnpm add -D @vueuse/nuxt @vueuse/core

定义变量

const contentParent = ref();

定义div

<div
      class="lg:flex overflow-auto h-6/6 w-[calc(100%+1rem)]"      
     ref="contentParent"
     @mousedown="BoxMove"
     style="position: absolute; cursor: move" >

...
</div>

 

 

// 窗口移动
  const BoxMove = (e: any) => {
    // 元素位置
    const { left: elL, top: elT } = useElementBounding(contentParent);

    // 鼠标位置
    let x: number = e.clientX;
    let y: number = e.clientY;

    // 鼠标到元素左边距离
    let moveX: number = x - elL.value;
    let moveY: number = y - elT.value;

    document.onmousemove = function (e: any) {
      contentParent.value.style.left = e.clientX - moveX + 'px';
      contentParent.value.style.top = e.clientY - moveY + 'px';
    };

    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
    };
  };

https://blog.csdn.net/m0_51108612/article/details/134333404