Reorderable

Drag-to-sort list. By default each item shows a fa-grip-vertical handle on the left — drag from the handle to reorder. Handles can be hidden with ->handles(false), which restores the classic grip-dot gutter and makes the entire item draggable. Supports optional server-side persistence when ->updateModelOnReorder() and ->updateUrl() are set.

Basic Reorderable (with handles)

Drag the handle on any item to reorder. The output reflects the updated key order.

First task

Drag handle to reorder

Second task

Drag handle to reorder

Third task

Drag handle to reorder

Fourth task

Drag handle to reorder

Saving...

Reorder items to see output...

// Default — handle visible on left of each item
<?= $m->reorderable('sortable')
    ->emptyMessage('No items yet')
    ->items([
        ['key' => 'a', 'html' => '<div style="padding:.6rem .85rem">First item</div>'],
        ['key' => 'b', 'html' => '<div style="padding:.6rem .85rem">Second item</div>'],
    ]) ?>

// With server-side persistence
<?= $m->reorderable('adminList')
    ->updateModelOnReorder()
    ->updateUrl('/api/items/reorder')
    ->loaderText('Saving order...')
    ->items($items) ?>

// Get instance
var r = m.reorderable('sortable');

// Get current order as array of keys
var order = r.getOrder(); // ['a', 'b', 'c']

// Add / update / remove items
r.addItem('e', '<div style="padding:.6rem .85rem">New item</div>');
r.upsertItem('b', '<div style="padding:.6rem .85rem"><em>Updated</em></div>');
r.removeItem('a');
r.clear();

// Count items
var n = r.count();

// Listen for reorder events
document.getElementById('sortable')
    .addEventListener('m:reorderable:reorder', function(e) {
        console.log('New order:', e.detail.order);
    });

No handles (classic grip-dot gutter)

Use ->handles(false) to hide the handle icon and revert to the classic grip-dot gutter — the entire item becomes draggable.

Alpha

Beta

Gamma

Saving...

Reorder items to see output...

// No handles — entire item is the drag target
<?= $m->reorderable('noHandlesList')
    ->handles(false)
    ->items([
        ['key' => 'x', 'html' => '<div style="padding:.6rem .85rem">Alpha</div>'],
        ['key' => 'y', 'html' => '<div style="padding:.6rem .85rem">Beta</div>'],
    ]) ?>

// Handles are configured server-side via ->handles(false).
// The JS API is the same regardless of handle mode.
var r = m.reorderable('noHandlesList');
console.log(r.getOrder());

PHP PHP Methods (Fluent)

Method / Property	Parameters	Description
`$m->reorderable($id)`	`string`	Create a reorderable component.
`->items($items)`	`array`	Set items. Each: `{key, html, id?, class?, attrs?}`.
`->handles($show)`	`bool`	Show grip handle icon on each item. Default: `true`. Pass `false` to use the classic grip-dot gutter (whole item draggable).
`->updateModelOnReorder($enabled)`	`bool`	Auto-POST new order to server after each drag. Default: `false`.
`->updateUrl($url)`	`?string`	URL to POST the reordered keys to.
`->emptyMessage($msg)`	`?string`	Message shown when there are no items.
`->loaderText($text)`	`string`	Loading indicator text (default: `"Saving..."`).

JS JS Methods

Method / Property	Parameters	Description
`m.reorderable(id, opts)`	`string, ?object`	Get or create reorderable instance.
`getOrder()`		Returns array of item keys in current visual order.
`addItem(key, html, opts)`	`string, string, ?object`	Append a new item (handle injected automatically if enabled).
`upsertItem(key, html, opts)`	`string, string, ?object`	Update existing item or insert if not found (handle injected automatically if enabled).
`removeItem(key)`	`string`	Remove an item by key.
`clear()`		Remove all items.
`count()`		Returns number of items.
`getItems()`		Returns array of item DOM elements.

EVENT Events

Event Name	Detail	Description
`m:reorderable:reorder`	`{id, order}`	Fired after items are drag-reordered (before server call).
`m:reorderable:saved`	`{id, order, response}`	Fired after server confirms the new order.
`m:reorderable:error`	`{id, order, error}`	Fired if the reorder POST fails.