Register

Drag & drop

Put things in order by dragging, or with the buttons

A list in order

Drag a row, or use its Move up and Move down; the new place is announced.

  1. Hot drinks
  2. Bakery
  3. Cold drinks
  4. Grocery
  5. Gifts & bags

The order of the categories on the register.

Show the code
<div class="stack w-100">
<ol class="sort-list" id="sort-1" data-sortable>
<li draggable="true">
<i class="ti ti-grip-vertical grip">
</i>
<span class="grow" data-sort-name>Hot drinks</span>
<button type="button" class="btn btn-ghost btn-sm btn-icon" aria-label="Move Hot drinks up" data-tip="Move Hot drinks up" data-move="up">
<i class="ti ti-arrow-up">
</i>
</button>
<button type="button" class="btn btn-ghost btn-sm btn-icon" aria-label="Move Hot drinks down" data-tip="Move Hot drinks down" data-move="down">
<i class="ti ti-arrow-down">
</i>
</button>
</li>
<li draggable="true">
<i class="ti ti-grip-vertical grip">
</i>
<span class="grow" data-sort-name>Bakery</span>
<button type="button" class="btn btn-ghost btn-sm btn-icon" aria-label="Move Bakery up" data-tip="Move Bakery up" data-move="up">
<i class="ti ti-arrow-up">
</i>
</button>
<button type="button" class="btn btn-ghost btn-sm btn-icon" aria-label="Move Bakery down" data-tip="Move Bakery down" data-move="down">
<i class="ti ti-arrow-down">
</i>
</button>
</li>
<li draggable="true">
<i class="ti ti-grip-vertical grip">
</i>
<span class="grow" data-sort-name>Cold drinks</span>
<button type="button" class="btn btn-ghost btn-sm btn-icon" aria-label="Move Cold drinks up" data-tip="Move Cold drinks up" data-move="up">
<i class="ti ti-arrow-up">
</i>
</button>
<button type="button" class="btn btn-ghost btn-sm btn-icon" aria-label="Move Cold drinks down" data-tip="Move Cold drinks down" data-move="down">
<i class="ti ti-arrow-down">
</i>
</button>
</li>
<li draggable="true">
<i class="ti ti-grip-vertical grip">
</i>
<span class="grow" data-sort-name>Grocery</span>
<button type="button" class="btn btn-ghost btn-sm btn-icon" aria-label="Move Grocery up" data-tip="Move Grocery up" data-move="up">
<i class="ti ti-arrow-up">
</i>
</button>
<button type="button" class="btn btn-ghost btn-sm btn-icon" aria-label="Move Grocery down" data-tip="Move Grocery down" data-move="down">
<i class="ti ti-arrow-down">
</i>
</button>
</li>
<li draggable="true">
<i class="ti ti-grip-vertical grip">
</i>
<span class="grow" data-sort-name>Gifts &amp; bags</span>
<button type="button" class="btn btn-ghost btn-sm btn-icon" aria-label="Move Gifts &amp; bags up" data-tip="Move Gifts &amp; bags up" data-move="up">
<i class="ti ti-arrow-up">
</i>
</button>
<button type="button" class="btn btn-ghost btn-sm btn-icon" aria-label="Move Gifts &amp; bags down" data-tip="Move Gifts &amp; bags down" data-move="down">
<i class="ti ti-arrow-down">
</i>
</button>
</li>
</ol>
<p class="sr-only" role="status" id="sort-1-status">
</p>
<p class="fs-sm muted">The order of the categories on the register.</p>
</div>

A board

Cards between columns: the Kanban app shows it in full.

Open the board
Show the code
<a class="btn" href="kanban.html">
<i class="ti ti-layout-kanban">
</i>Open the board</a>