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

machine.js

// guards
const gteNewDragIndex = (c, e) => c.snapshot.index >= e.newDragIndex;
const gtNewDragIndex = (c, e) => c.snapshot.index > e.newDragIndex;
const lteNewDragIndex = (c, e) => c.snapshot.index <= e.newDragIndex;
const ltNewDragIndex = (c, e) => c.snapshot.index < e.newDragIndex;
const sameDropId = (c, e) => e.snapshot.dropId === e.destinationDropId;
const mismatchType = (c, e) =>
  e.initialSnapshot.dropType !== e.snapshot.dropType;
const identicalToRefId = (c, e) => e.snapshot.id === e.initialSnapshot.dragId;
const differentDropId = (c, e) => !sameDropId(c, e);
const isAboveActiveIndex = (c, e) =>
  sameDropId(c, e) && e.initialSnapshot.dragIndex > e.snapshot.index;
const isBelowActiveIndex = (c, e) =>
  sameDropId(c, e) && e.initialSnapshot.dragIndex < e.snapshot.index;

const setSnapshot = assign((c, e) => ({ snapshot: e.snapshot }));

const droppableMachine = Machine(
  {
    initial: "idle",
    context: {
      x: 0,
      y: 0,
      snapshot: {}
    },
    states: {
      idle: {
        on: {
          PREPARE_DRAGGABLE: [
            { target: "dragging.disabled", cond: mismatchType },
            {
              target: "dragging.active",
              cond: identicalToRefId
            },
            {
              target: "dragging.passive_source.inside.above_index",
              cond: isAboveActiveIndex
            },
            {
              target: "dragging.passive_source.inside.below_index",
              cond: isBelowActiveIndex
            },
            {
              target: "dragging.passive_destination_idle",
              cond: differentDropId
            },
            { target: "dragging.disabled" }
          ]
        },
        exit: setSnapshot
      },
      dragging: {
        initial: "disabled",
        states: {
          disabled: {
            entry: "updateInitialPos",
            type: "final"
          },
          active_prepare_drag: {},
          active: {
            entry: "updateActivePos",
            on: {
              UPDATE_MOUSE_POS: {
                actions: "updateActivePos"
              },
              ENDING_DRAG: "active_ending_drag"
            }
          },
          active_ending_drag: {
            entry: assign((c, e) => {
              const { x, y } = e.draggableSnapshotArrByDropId[
                e.destinationDropId
              ][e.newDragIndex];
              return { x, y };
            }),
            type: "final"
          },
          passive_source: {
            initial: "inside",
            states: {
              inside: {
                initial: "below_index",
                states: {
                  above_index: {
                    initial: "idle",
                    states: {
                      idle: {
                        entry: "updateInitialPos",
                        on: {
                          UPDATE_MOUSE_POS: {
                            target: "shifted",
                            cond: gteNewDragIndex,
                            actions: "shiftPassiveSourceAboveIndex"
                          }
                        }
                      },
                      shifted: {
                        on: {
                          UPDATE_MOUSE_POS: {
                            target: "idle",
                            cond: ltNewDragIndex
                          }
                        }
                      }
                    }
                  },
                  below_index: {
                    initial: "idle",
                    states: {
                      idle: {
                        entry: "updateInitialPos",
                        on: {
                          UPDATE_MOUSE_POS: {
                            target: "shifted",
                            cond: lteNewDragIndex,
                            actions: "shiftPassiveSourceBelowIndex"
                          }
                        }
                      },
                      shifted: {
                        on: {
                          UPDATE_MOUSE_POS: {
                            target: "idle",
                            cond: gtNewDragIndex
                          }
                        }
                      }
                    }
                  }
                }
              },
              outside: {}
            }
          },
          passive_destination_idle: {
            entry: "updateInitialPos"
          },
          passive_destination_above_index: {},
          passive_destination_below_index: {}
        }
      }
    }
  },
  {
    actions: {
      updateInitialPos: assign((c, e) => ({
        x: c.snapshot.x - e.droppableSnapshotById[c.snapshot.dropId].x,
        y: c.snapshot.y - e.droppableSnapshotById[c.snapshot.dropId].y
      })),
      updateActivePos: assign((c, e) => ({
        x: e.mousePos.x - e.initialSnapshot.offsetX,
        y: e.mousePos.y - e.initialSnapshot.offsetY
      })),
      shiftPassiveSourceAboveIndex: assign((c, e) => {
        const activeSnapshot =
          e.draggableSnapshotById[e.initialSnapshot.dragId];
        const containerSnapshot = e.droppableSnapshotById[c.snapshot.dropId];
        return {
          x: c.snapshot.x - e.droppableSnapshotById[c.snapshot.dropId].x,
          y: c.snapshot.y - containerSnapshot.y + activeSnapshot.height
        };
      }),
      shiftPassiveSourceBelowIndex: assign((c, e) => {
        const activeSnapshot =
          e.draggableSnapshotById[e.initialSnapshot.dragId];
        const containerSnapshot = e.droppableSnapshotById[c.snapshot.dropId];
        return {
          x: c.snapshot.x - e.droppableSnapshotById[c.snapshot.dropId].x,
          y: c.snapshot.y - containerSnapshot.y - activeSnapshot.height
        };
      })
    }
  }
);