Generated by XState Viz: https://xstate.js.org/viz

machine.js

Machine({
  initial: 'idle',
  context: {
    // the position of the box
    x: 0,
    y: 0,
    // where you clicked
    pointerx: 0,
    pointery: 0,
    // how far from where you clicked
    dx: 0, // how far: x
    dy: 0, // how far: y
  },
  states: {
    idle: {
      on: {
        // event: nextstate
        mousedown: {
          target: 'dragging',
          actions: assign((context, mouseEvent) => {
            return {
              ...context,
              pointerx: mouseEvent.clientX,
              pointery: mouseEvent.clientY
            }
          })
        }
      }
    },
    dragging: {
      on: {
        mousemove: {
          target: 'dragging',
          actions: assign((context, mouseEvent) => {
            return {
              ...context,
              dx: mouseEvent.clientX - context.pointerx,
              dy: mouseEvent.clientY - context.pointery
            }
          })
        },
        mouseup: {
          target: 'idle',
          actions: assign((context) => {
           return {
             ...context,
            x: context.x + context.dx,
            y: context.y + context.dy,
            dx: 0,
            dy: 0
           }
          })
          // change context.x and context.y
        }
      }
    }
  }
})