Reorder
Lista drag-and-drop con handle — patrón ion-reorder. Soporta touch y mouse vía Pointer Events. Cada item necesita un data-value para que el evento reorder:change emita el nuevo orden.
Tip: el handle es cualquier elemento con clase .reorder-handle. Eso permite, por ejemplo, hacer el item entero arrastrable (basta con poner la clase en el <li> directamente, aunque el patrón Apple usa handle dedicado).
Confirmar pedido proveedor
Revisar inventario almacén
Preparar nómina del mes
Llamar al transportista
Copy
<div class="reorder">
<ol class="reorder-list">
<li class="reorder-item" data-value="task-1">
<button class="reorder-handle" type="button" aria-label="Mover Confirmar pedido proveedor" title="Mover">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="9" cy="6" r="1.2"/><circle cx="9" cy="12" r="1.2"/><circle cx="9" cy="18" r="1.2"/>
<circle cx="15" cy="6" r="1.2"/><circle cx="15" cy="12" r="1.2"/><circle cx="15" cy="18" r="1.2"/>
</svg>
</button>
<div class="reorder-content">
Confirmar pedido proveedor
</div>
</li>
<li class="reorder-item" data-value="task-2">
<button class="reorder-handle" type="button" aria-label="Mover Revisar inventario almacén" title="Mover">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="9" cy="6" r="1.2"/><circle cx="9" cy="12" r="1.2"/><circle cx="9" cy="18" r="1.2"/>
<circle cx="15" cy="6" r="1.2"/><circle cx="15" cy="12" r="1.2"/><circle cx="15" cy="18" r="1.2"/>
</svg>
</button>
<div class="reorder-content">
Revisar inventario almacén
</div>
</li>
<li class="reorder-item" data-value="task-3">
<button class="reorder-handle" type="button" aria-label="Mover Preparar nómina del mes" title="Mover">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="9" cy="6" r="1.2"/><circle cx="9" cy="12" r="1.2"/><circle cx="9" cy="18" r="1.2"/>
<circle cx="15" cy="6" r="1.2"/><circle cx="15" cy="12" r="1.2"/><circle cx="15" cy="18" r="1.2"/>
</svg>
</button>
<div class="reorder-content">
Preparar nómina del mes
</div>
</li>
<li class="reorder-item" data-value="task-4">
<button class="reorder-handle" type="button" aria-label="Mover Llamar al transportista" title="Mover">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="9" cy="6" r="1.2"/><circle cx="9" cy="12" r="1.2"/><circle cx="9" cy="18" r="1.2"/>
<circle cx="15" cy="6" r="1.2"/><circle cx="15" cy="12" r="1.2"/><circle cx="15" cy="18" r="1.2"/>
</svg>
</button>
<div class="reorder-content">
Llamar al transportista
</div>
</li>
</ol>
</div>
Copy
{% from "reorder.jinja" import reorder %}
{{ reorder(items=[
{"value": "task-1", "label": "Confirmar pedido proveedor"},
{"value": "task-2", "label": "Revisar inventario almacén"},
{"value": "task-3", "label": "Preparar nómina del mes"},
{"value": "task-4", "label": "Llamar al transportista"},
]) }}
Copy
{% from "reorder.jinja" import reorder %}
{{ reorder(items=[
{"value": "task-1", "label": "Confirmar pedido proveedor"},
{"value": "task-2", "label": "Revisar inventario almacén"},
{"value": "task-3", "label": "Preparar nómina del mes"},
{"value": "task-4", "label": "Llamar al transportista"},
]) }}
Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />
1.
Producto premium
299,00 €
2.
Producto estándar
149,00 €
3.
Producto básico
59,00 €
Copy
<div class="reorder">
<ol class="reorder-list">
<li class="reorder-item" data-value="p1">
<button class="reorder-handle" type="button" aria-label="Mover Producto premium" title="Mover">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="9" cy="6" r="1.2"/><circle cx="9" cy="12" r="1.2"/><circle cx="9" cy="18" r="1.2"/>
<circle cx="15" cy="6" r="1.2"/><circle cx="15" cy="12" r="1.2"/><circle cx="15" cy="18" r="1.2"/>
</svg>
</button>
<div class="reorder-content"><strong style="color:var(--ink-3); margin-right:.5rem">1.</strong>
Producto premium
</div><div class="reorder-actions">299,00 €</div>
</li>
<li class="reorder-item" data-value="p2">
<button class="reorder-handle" type="button" aria-label="Mover Producto estándar" title="Mover">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="9" cy="6" r="1.2"/><circle cx="9" cy="12" r="1.2"/><circle cx="9" cy="18" r="1.2"/>
<circle cx="15" cy="6" r="1.2"/><circle cx="15" cy="12" r="1.2"/><circle cx="15" cy="18" r="1.2"/>
</svg>
</button>
<div class="reorder-content"><strong style="color:var(--ink-3); margin-right:.5rem">2.</strong>
Producto estándar
</div><div class="reorder-actions">149,00 €</div>
</li>
<li class="reorder-item" data-value="p3">
<button class="reorder-handle" type="button" aria-label="Mover Producto básico" title="Mover">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="9" cy="6" r="1.2"/><circle cx="9" cy="12" r="1.2"/><circle cx="9" cy="18" r="1.2"/>
<circle cx="15" cy="6" r="1.2"/><circle cx="15" cy="12" r="1.2"/><circle cx="15" cy="18" r="1.2"/>
</svg>
</button>
<div class="reorder-content"><strong style="color:var(--ink-3); margin-right:.5rem">3.</strong>
Producto básico
</div><div class="reorder-actions">59,00 €</div>
</li>
</ol>
</div>
Copy
{{ reorder(items=[
{"value": "p1", "label": "Producto premium", "meta": "299,00 €"},
{"value": "p2", "label": "Producto estándar", "meta": "149,00 €"},
{"value": "p3", "label": "Producto básico", "meta": "59,00 €"},
], show_index=true) }}
Copy
{{ reorder(items=[
{"value": "p1", "label": "Producto premium", "meta": "299,00 €"},
{"value": "p2", "label": "Producto estándar", "meta": "149,00 €"},
{"value": "p3", "label": "Producto básico", "meta": "59,00 €"},
], show_index=true) }}
Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />
Aragó
Cataluña
Madrid
Valencia
Andalucía
Orden actual:
Copy
<div data-signals-order="''" data-on:reorder:change="$order = evt.detail.values.join(', ')">
<div class="reorder">
<ol class="reorder-list">
<li class="reorder-item" data-value="Aragó">
<button class="reorder-handle" type="button" aria-label="Mover Aragó" title="Mover">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="9" cy="6" r="1.2"/><circle cx="9" cy="12" r="1.2"/><circle cx="9" cy="18" r="1.2"/>
<circle cx="15" cy="6" r="1.2"/><circle cx="15" cy="12" r="1.2"/><circle cx="15" cy="18" r="1.2"/>
</svg>
</button>
<div class="reorder-content">
Aragó
</div>
</li>
<li class="reorder-item" data-value="Cataluña">
<button class="reorder-handle" type="button" aria-label="Mover Cataluña" title="Mover">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="9" cy="6" r="1.2"/><circle cx="9" cy="12" r="1.2"/><circle cx="9" cy="18" r="1.2"/>
<circle cx="15" cy="6" r="1.2"/><circle cx="15" cy="12" r="1.2"/><circle cx="15" cy="18" r="1.2"/>
</svg>
</button>
<div class="reorder-content">
Cataluña
</div>
</li>
<li class="reorder-item" data-value="Madrid">
<button class="reorder-handle" type="button" aria-label="Mover Madrid" title="Mover">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="9" cy="6" r="1.2"/><circle cx="9" cy="12" r="1.2"/><circle cx="9" cy="18" r="1.2"/>
<circle cx="15" cy="6" r="1.2"/><circle cx="15" cy="12" r="1.2"/><circle cx="15" cy="18" r="1.2"/>
</svg>
</button>
<div class="reorder-content">
Madrid
</div>
</li>
<li class="reorder-item" data-value="Valencia">
<button class="reorder-handle" type="button" aria-label="Mover Valencia" title="Mover">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="9" cy="6" r="1.2"/><circle cx="9" cy="12" r="1.2"/><circle cx="9" cy="18" r="1.2"/>
<circle cx="15" cy="6" r="1.2"/><circle cx="15" cy="12" r="1.2"/><circle cx="15" cy="18" r="1.2"/>
</svg>
</button>
<div class="reorder-content">
Valencia
</div>
</li>
<li class="reorder-item" data-value="Andalucía">
<button class="reorder-handle" type="button" aria-label="Mover Andalucía" title="Mover">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="9" cy="6" r="1.2"/><circle cx="9" cy="12" r="1.2"/><circle cx="9" cy="18" r="1.2"/>
<circle cx="15" cy="6" r="1.2"/><circle cx="15" cy="12" r="1.2"/><circle cx="15" cy="18" r="1.2"/>
</svg>
</button>
<div class="reorder-content">
Andalucía
</div>
</li>
</ol>
</div>
<p style="margin-top:.75rem">Orden actual: <code data-text="$order"></code></p>
</div>
Copy
<div data-signals-order="''" data-on:reorder:change="$order = evt.detail.values.join(', ')">
{{ reorder(items=["Aragó", "Cataluña", "Madrid", "Valencia", "Andalucía"]) }}
<p>Orden actual: <code data-text="$order"></code></p>
</div>
Copy
<div data-signals-order="''" data-on:reorder:change="$order = evt.detail.values.join(', ')">
{{ reorder(items=["Aragó", "Cataluña", "Madrid", "Valencia", "Andalucía"]) }}
<p>Orden actual: <code data-text="$order"></code></p>
</div>
Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />
API · macro reorder()
Prop Tipo Default Descripción
itemslist[dict] | list[str] []Items a reordenar. Dict campos: value, label, meta. handle_iconbool truePinta el icono de 6 puntos en el handle. show_indexbool falseMuestra el índice numérico (1., 2., …) antes del label.
Evento
Evento Detail Descripción
reorder:change{values: string[], to: number, item: HTMLElement}Disparado en .reorder-list cuando se completa un reorden. values contiene los data-value en el nuevo orden.
API JS · window.OKReorder
OKReorder.init(list) // inicializa una .reorder-list
OKReorder.initAll(root) // inicializa todas en root
OKReorder.collectValues(l) // → string[] con orden actual