@nomorejalapenos/draggable-react v0.0.15-s5

Vanilla

import { useDraggable } from '@nomorejalapenos/draggable-react'

export default function App() {
  const target = useRef<HTMLDivElement>(null!)
  const container = useRef<HTMLDivElement>(null!)

  useDraggable({
    target,
    container,
    smoothness: 7,
  })

  const containerStyle: CSSProperties = {
    position: 'absolute',
    top: 'calc(50% - 20vmin)',
    left: 'calc(50% - 30vmin)',
    width: '60vmin',
    height: '40vmin',
    backgroundColor: 'lightblue',
    touchAction: 'none',
  }

  const targetStyle: CSSProperties = {
    width: '10vmin',
    height: '10vmin',
    backgroundColor: 'tomato',
  }

  return (
    <div
      style={containerStyle}
      ref={container}
    >
      <div
        style={targetStyle}
        ref={target}
      ></div>
    </div>
  )
}