gasInjection-project/src/hooks/event/useDrag.ts

export function useDrag(sliderDom: HTMLElement) {
  let startPoint = { x: 0, y: 0 };
  let isDown = false;
  let premitiveX = 0;
  let premitiveY = 0;

  function onMouseDown(e: Event) {
    e.stopPropagation();
    e.preventDefault();
    isDown = true;
    const style = window.getComputedStyle(sliderDom!);
    const { transform } = style;
    if (transform !== 'none') {
      const matrixArr = transform.replace(/[^0-9\-,]/g, '').split(',');
      console.log('matrixArr', matrixArr);
      premitiveX = parseInt(matrixArr[4]);
      premitiveY = parseInt(matrixArr[5]);
    } else {
      premitiveX = 0;
      premitiveY = 0;
    }
    const { clientX, clientY } = e;
    startPoint = { x: clientX, y: clientY };
  }

  function onMosueUp(e: any) {
    isDown = false;
  }

  function onMouseMove(e: any) {
    if (!isDown) return;
    const { clientX, clientY } = e;
    const moveDistancX = clientX - startPoint.x;
    const moveDistancY = clientY - startPoint.y;
    const offsetX = premitiveX + moveDistancX;
    const offsetY = premitiveY + moveDistancY;
    sliderDom!.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
  }

  sliderDom.addEventListener('mousedown', onMouseDown);
  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('pointerup', onMosueUp);

  return { onMouseDown, onMouseMove, onMosueUp };
}