Mobx React Form Sortable

Skill: mobx-react-form-sortable

Mission

Guide the user through implementing sortable/reorderable array fields in mobx-react-form using the move() method and drag-and-drop libraries.

Use this skill when the user needs to:

• Reorder array fields with drag-and-drop
• Use up/down buttons to reorder items
• Sort dynamic field collections
• Preserve field bindings and validation during reordering

The move() Method

The move(fromIndex, toIndex) method is available on every Form and Field instance:

form.move(fromIndex, toIndex);
field.move(fromIndex, toIndex);

Parameters:

| Param | Type | Description | |-------|------|-------------| | fromIndex | number | Current index of the item to move | | toIndex | number | Target index to place the item |

Behavior:

• Moves the entry at fromIndex to toIndex via a single MobX-reactive splice
• Does nothing if fromIndex === toIndex or either index is out of bounds
• All field references, values, and validation state are preserved
• The change is fully tracked by MobX — observers re-render automatically

Internal: ArrayMap

Array fields are backed by ArrayMap — an ordered key-value collection with insertion order maintained via an observable array.

class ArrayMap {
  move(fromIndex: number, toIndex: number): void;
  toArray(): Array; // expose underlying observable array
}

The move() method delegates to ArrayMap.move() which performs a single observable splice operation.

Form Setup for Sortable Arrays

const fields = [
  'products[]',
  'products[].name',
  'products[].price',
  'products[].quantity',
];

const values = {
  products: [
    { name: 'Product 1', price: 10, quantity: 1 },
    { name: 'Product 2', price: 20, quantity: 2 },
    { name: 'Product 3', price: 30, quantity: 3 },
  ],
};

Drag-and-Drop with @dnd-kit

Package setup

npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities

Basic pattern

import { DndContext, closestCenter } from '@dnd-kit/core';
import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';

const SortableProductItem = observer(({ field }) => {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
    id: field.key,
  });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1,
  };

  return (
    
      
      
      
    
  );
});

const SortableList = observer(({ form }) => {
  const products = form.$('products');

  function handleDragEnd(event) {
    const { active, over } = event;
    if (active.id !== over.id) {
      const oldIndex = products.fields.toArray().findIndex(([k]) => k === active.id);
      const newIndex = products.fields.toArray().findIndex(([k]) => k === over.id);
      products.move(oldIndex, newIndex);
    }
  }

  return (
    
       f.key)} strategy={verticalListSortingStrategy}>
        {products.map((field) => (
          
        ))}
      
    
  );
});

Up/Down Buttons (without drag)

For simple list reordering without drag-and-drop:

const ProductRow = observer(({ field, index, onMoveUp, onMoveDown, isFirst, isLast }) => (
  
    
    
    
    ↑
    ↓
  
));

const ProductList = observer(({ form }) => {
  const products = form.$('products');

  const handleMoveUp = (index) => {
    if (index > 0) products.move(index, index - 1);
  };

  const handleMoveDown = (index) => {
    if (index 
      {products.map((field, index) => (
         handleMoveUp(index)}
          onMoveDown={() => handleMoveDown(index)}
          isFirst={index === 0}
          isLast={index === products.size - 1}
        />
      ))}
       products.add()}>Add Product
    
  );
});

Adding Items

Add Product
Remove

New items are auto-created with the next integer key. The move() method works on newly added items.

Validation Preservation

When items are moved, their validation state is preserved:

// All field values, errors, dirty/pristine state remain after move
form.$('products').move(0, 2);
form.$('products[2].name').isValid; // still valid if it was before
form.$('products[2].name').isDirty; // still tracks changes
form.$('products[2].name').error;   // still shows errors

Programmatic Move

// Move between forms/fields
form.move(0, 3);         // move field at index 0 to index 3
form.$('items').move(1, 0); // move second item to first position

// Move within the same container
form.$('products').$(0).move(0, 2); // move first product to third position

Key Takeaways

1. move(from, to): Simple array reordering — preserves all field state.
2. Library-agnostic: Works with @dnd-kit, react-beautiful-dnd, or plain buttons.
3. ArrayMap: Internal data structure maintains insertion order reactively.
4. Preserved state: Validation, errors, dirty/pristine survive reordering.
5. Dynamic arrays: Add/del + move = fully editable, sortable lists.
6. MobX reactive: Re-rendering is automatic — no manual DOM updates.

Related Skills

• [mobx-react-form-api](../mobx-react-form-api/SKILL.md) — Core API prerequisite
• [mobx-react-form-nested](../mobx-react-form-nested/SKILL.md) — Nested/array fields
• [mobx-react-form-computed](../mobx-react-form-computed/SKILL.md) — Reactive calculations for sortable data (e.g., cart totals)

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: foxhound87
• Source: foxhound87/skills
• License: MIT

Install and usage instructions live in the source repository linked above.