vueusejs實現拖動

jiduoduo發表於2024-03-14
VueJS

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

相關文章