48px

wujingjing

2025-04-14 77b15609b62c9bcd80fcdfd65f134a06252920b9

 src/hooks/useDrag.ts

@@ -6,6 +6,8 @@
    * 拖拽手柄元素的选择器
    */
   handle?: string | HTMLElement | Ref<HTMLElement>;

   startPos?: { x?: number; y?: number };
};

const getHandleElement = (handle: string | HTMLElement | Ref<HTMLElement>) => {
@@ -21,10 +23,10 @@
};

export const useDrag = (options: UseDragOptions = {}) => {
   const { handle } = options;
   const { handle, startPos } = options;
   const isDragging = ref(false);
   const startPos = ref({ x: 0, y: 0 });
   const offset = ref({ x: 0, y: 0 });
   const startPosRef = ref({ x: 0, y: 0 });
   const offset = ref({ x: startPos?.x ?? 0, y: startPos?.y ?? 0 });
   const startDrag = (e: MouseEvent) => {
      // 如果设置了handle,则判断事件源是否是handle元素或其子元素
      if (handle) {
@@ -34,7 +36,7 @@
         }
      }
      isDragging.value = true;
      startPos.value = {
      startPosRef.value = {
         x: e.clientX - offset.value.x,
         y: e.clientY - offset.value.y,
      };
@@ -43,8 +45,8 @@
         if (!isDragging.value) return;

         offset.value = {
            x: e.clientX - startPos.value.x,
            y: e.clientY - startPos.value.y,
            x: e.clientX - startPosRef.value.x,
            y: e.clientY - startPosRef.value.y,
         };
      };