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

machine.js

Machine({
  initial: 'idle',
  context: {
    dx: 0,
    dy: 0,
    pointerx: 0,
    pointery: 0
  },
  states: {
    'idle': {
      id: 'idle',
      entry: assign({
        dx: 0,
        dy: 0,
        pointerx: 0,
        pointery: 0
      }),
      on: {
        // when this event happens...
        'mousedown': {
          // go here...
          target: 'dragging',
          // and do this...
          actions: assign({
            pointerx: (context, event) => event.clientX,
            pointery: (context, event) => event.clientY
          })
        }
      }
    },
    'dragging': {
      initial: 'outside',
      states: {
        outside: {  // dragging.outside
          on: {
            'mouseenter': 'inside',
            'mouseup': {
              target: '#idle'
            }
          }
        },
        inside: {  // dragging.inside
          on: {
            'mouseleave': 'outside',
            'mouseup': {
              target: '#dropped'
            }
          }
        }
      },
      on: {
        'mousemove': {
          internal: true,
          actions: assign({
            dx: (context, event) => event.clientX - context.pointerx,
            dy: (context, event) => event.clientY - context.pointery,
          })
        }
      }
    },
    'dropped': {
      id: 'dropped',
      after: {
        1000: 'idle'
      }
    }
  }
})