<div class="draggable"> Draggable Element </div>
.draggable {
  touch-action: none;
  user-select: none;
const position = { x: 0, y: 0 }

  listeners: {
    start (event) {
    move (event) {
      position.x += event.dx
      position.y += event.dy =
        `translate(${position.x}px, ${position.y}px)`

Dragging is the simplest action interact.js provides. To make an element draggable, create an interactable with your desired target then call the draggable method with the options that you need. In addition to the common InteractEvent properties, dragmove events also have:

dragmove propertyDescription
dragEnterThe dropzone this Interactable was dragged over
dragLeaveThe dropzone this Interactable was dragged out of

lockAxis and startAxis

// lock the drag to the starting direction
  startAxis: 'xy'
  lockAxis: 'start'

// only drag if the drag was started horizontally
  startAxis: 'x'
  lockAxis: 'x'

There are two options for controlling the axis of drag actions: startAxis and lockAxis.

startAxis sets the direction that the initial movement must be in for the action to start. Use 'x' to require the user to start dragging horizontally or 'y' to start dragging vertically.

lockAxis causes the drag events to change only in the given axis. If a value of 'start' is used, then the drag will be locked to the starting direction.


  cursorChecker: (action, interactable, element, interacting) => {
    switch (action.axis) {
      case 'x': return 'ew-resize'
      case 'y': return 'ns-resize'
      default: return interacting ? 'grabbing' : 'grab'

You can tell interact.js which cursor to set on the target with a cursorChecker function.