interact.js - JavaScript drag and drop, resizing and multi-touch gestures for modern browsers

The reflow method lets you trigger an action start -> move -> end sequence which runs modifiers and does drop calculations, etc. If your interactable target is a CSS selector, an interaction will be run for each matching element.

JS
HTML
CSS

const resizableContainer = interact('#container')
const draggable = interact('.draggable')

draggable.on('tap', function (event) {
  // start a drag action to apply modifiers
  draggable.reflow({ name: 'drag', axis: 'xy' })
})

// the usual interact actions setup
resizableContainer.resizable({
  edges: { bottom: true, right: true },
  modifiers: [
    interact.modifiers.restrictEdges({
      outer: 'html',
    }),
    interact.modifiers.restrictEdges({
      min: { width: 200, height: 200 }
    })
  ],
  listeners: {
    move: function (event) {
      let { x, y } = event.target.dataset

      x = (parseFloat(x) || 0) + event.deltaRect.left
      y = (parseFloat(y) || 0) + event.deltaRect.top

      Object.assign(event.target.style, {
        width: `${event.rect.width}px`,
        height: `${event.rect.height}px`,
        transform: `translate(${x}px, ${y}px)`
      })

      Object.assign(event.target.dataset, { x, y })
    }
  }
})

draggable.draggable({
  inertia: true,
  modifiers: [
    interact.modifiers.restrictRect({
      restriction: document.querySelector('#container'),
      endOnly: true,
    })
  ],
  listeners: {
    move (event) {
      const x = (parseFloat(event.target.dataset.x) || 0) + event.dx
      const y = (parseFloat(event.target.dataset.y) || 0) + event.dy

      event.target.style.transform =
        `translate(${x}px, ${y}px)`
      Object.assign(event.target.dataset, { x, y })
    },
  }
})

If the elements have inertia, endOnly modifiers and smoothEndDuration, then the interactions may not end immediately. The reflow method returns a Promise which is resolved when all interactions are complete. So you can await or .then() multiple reflows

const interactable = interact(target).draggable({}).resizable({})

async function onWindowResize () {
  // start a resize action and wait for inertia to finish
  await interactable.reflow({ name: drag, axis: 'x' })

  // start a drag action
  await interactable.reflow({
    name: 'resize',
    edges: { left: true, bottom: true },
  })
}

window.addEventListener(onWindowResize, 'resize')