useDnD.js

const useDnD = ({ onStart, onMove, onComplete }) => {
  const [draging, setDraging] = useState(false)

  const handleDragStart = useCallback(() => {
    setDraging(true)
    // [Record starting point]
    onStart ?? onStart()
  }, [setDraging, onStart])

  const handleDragMove = useCallback(() => {
    // [Calc the current position]
    onMove ?? onMove()
  }, [onMove])

  const handleDragComplete = useCallback(() => {
    setDraging(false)
    // [Resize the element]
    onComplete ?? onComplete()
  }, [setDraging, onComplete])

  useEffect(() => {
    if(draging) {
      document.addEventListener('mousemove', handleDragMove)
      document.addEventListener('mouseup', handleDragComplete)
    }
    return () => {
      document.removeEventListener('mousemove', handleDragMove)
      document.removeEventListener('mouseup', handleDragComplete)
    }
  }, [draging, handleDragMove, handleDragComplete])

  return handleDragStart
}

const DnD = () => {
  const onComplete = useCallback(() => {
    // handle drag complete
  }, [])
    
  return <div onMouseDown={useDnD({ onComplete )}
}