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

export function useDrag(sliderDom: HTMLElement) {
  let startPoint = 0;
  let isDown = false;
  let premitiveX = 0;
  function onMouseDown(e: any) {
    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]);
    } else {
      premitiveX = 0;
    }
    const { clientX } = e;
    startPoint = clientX;
  }

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

  function onMouseMove(e: any) {
    if (!isDown) return;
    const { clientX } = e;
    const moveDistance = clientX - startPoint;
    const offset = premitiveX + moveDistance;
    console.log('offset', offset);
    sliderDom!.style.transform = `translateX(${offset}px)`;
  }

  sliderDom.addEventListener('mouseDown', onMouseDown);
  sliderDom.addEventListener('mouseMove', onMouseMove);
  sliderDom.addEventListener('mouseUp', onMosueUp);

  return { onMouseDown, onMouseMove, onMosueUp };
}