@nomorejalapenos/draggable v0.0.28-s20

import { draggable } from '@nomorejalapenos/draggable'

const container = document.createElement('div')
const target = document.createElement('div')

container.style.cssText = `
  position: absolute;
  top: calc(50% - 20vmin);
  left: calc(50% - 30vmin);
  width: 60vmin;
  height: 40vmin;
  background-color: lightblue;
  touch-action: none;
`

target.style.cssText = `
  width: 10vmin;
  height: 10vmin;
  background-color: tomato;
`

container.appendChild(target)
document.body.appendChild(container)

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

import { draggable } from '@nomorejalapenos/draggable'

const el = document.createElement('div')

el.style.cssText = `
  position: absolute;
  left: calc(50vw - 10vmin);
  top: calc(50vh - 10vmin);
  width: 20vmin;
  height: 20vmin;
  background-color: tomato;
`

document.body.appendChild(el)
document.body.style.cssText = `
  touch-action: none;
  overflow: hidden;
`

draggable({
  target: el,
  smoothness: 7,
  restore: true,
  handle: {
    tick: (state) => {
      el.style.transform = `

        ${state.transformString}

        scale(
          ${1 + Math.abs(state.track.x.progress.current)}
        )

        rotate(
          ${state.track.x.progress.current * 0.5}rad
        )
      `
    },
  },
})

Use the CSS property touch-action for the container on touch devices to disable the default behavior completely or partially