Monsoon v0.2.0
Made by Alexandre Kohler Star

Interactive

Sortable list

Reorder with a pointer or the keyboard: Space picks an item up, the arrows move it, Space drops it and Escape puts it back. Siblings slide out of the way and the list scrolls near its edges. Needs monsoon.js.

Interactive4 classesNeeds monsoon.jsLight and dark

Needs monsoon.js. The styles work on their own, and the behavior comes from the optional interactive layer: add <script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script> or import 'monsooncss/js'. See the interactive layer.

Example

Full

JavaScript API

Attribute

data-m-sortable

Options

OptionDescription
data-m-sortable-group="board" (lists that trade items)
data-m-sortable-axis="x" (a horizontal list)
a .sortable-handle inside items limits the pointer drag to it

Methods

MethodDescription
Monsoon.sortable(el).items
Monsoon.sortable(el).move(item, index, toList)

Events

EventDescription
monsoon:sort { item, from, to, oldIndex, newIndex } (preventDefault undoes it)

Classes

4 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

ClassTypeWhat it does
Base Base class of the sortable list. On an <ul> in the example. Sets grid display, alignment, gap, margin, padding and auto cursor.
CSS
.sortable:has(.sortable-handle) > .sortable-item {
  cursor: auto;
}

.sortable:not(:has(.sortable-handle)) > .sortable-item {
  touch-action: none;
}
Part Part of the sortable list. On a <li> in the example. Sets flex display, alignment, gap, padding, text size and text color.
CSS
.sortable-item[data-dragging] > * {
  visibility: hidden;
}

.sortable-item:focus-visible {
  outline: var(--m-ring);
  outline-offset: var(--m-ring-offset);
}
Part Part of the sortable list. On a <span> in the example. Sets alignment, width, height, margin, background and grab cursor.
CSS
.sortable-handle {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-inline-start: -.25rem;
  background-color: var(--muted-foreground);
  mask: var(--m-ix-grip) center / contain no-repeat;
  cursor: grab;
  touch-action: none;
}

.sortable:has(.sortable-handle) > .sortable-item {
  cursor: auto;
}
Modifier Modifier, combined with the sortable class. Not used in the example above. Sets fixed position, offsets, stacking order, margin, overflow and shadow.
CSS
@media (prefers-reduced-motion: reduce) {
  .sortable-ghost {
    rotate: none;
    scale: none;
  }
}

.sortable-ghost {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 80;
  margin: 0;
  overflow: visible;
  pointer-events: none;
  box-shadow: var(--m-shadow-xl);
  rotate: 1.5deg;
  scale: 1.03;
  cursor: grabbing;
  list-style: none;
}

Usage

The styles ship inside the same stylesheet as the utilities, and the behavior comes from the optional monsoon.js script, which enhances any element with a matching data-m attribute, including markup added later.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script>

<!-- Sortable list: start from the base class, then add modifiers -->
<ul class="sortable max-w-sm" data-m-sortable aria-label="Playlist">
  <li class="sortable-item"><span class="sortable-handle" aria-hidden="true"></span><span class="flex-1">Overture</span><span class="text-xs text-muted-foreground">2:14</span></li>
  <li class="sortable-item"><span class="sortable-handle" aria-hidden="true"></span><span class="flex-1">Night drive</span><span class="text-xs text-muted-foreground">3:41</span></li>
  <li class="sortable-item"><span class="sortable-handle" aria-hidden="true"></span><span class="flex-1">Monsoon season</span><span class="text-xs text-muted-foreground">4:05</span></li>
  <li class="sortable-item"><span class="sortable-handle" aria-hidden="true"></span><span class="flex-1">Glass harbor</span><span class="text-xs text-muted-foreground">2:58</span></li>
  <li class="sortable-item"><span class="sortable-handle" aria-hidden="true"></span><span class="flex-1">Coda</span><span class="text-xs text-muted-foreground">1:47</span></li>
</ul>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

Accessibility

  • Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.
InteractiveSelect (custom)A fully custom select over a native one, which stays in the form with its value and change events in sync. Options can carry an icon, an image, a color or a description, optgroups become headings, long lists get a search box, multiple shows chips, and it can be clearable. Keyboard and screen readers follow the WAI-ARIA select only combobox pattern, and the size, tone and variant classes of .select carry over. Needs monsoon.js.InteractiveTags inputChips over a plain text input that keeps a comma separated value. Enter or comma adds, Backspace removes the last tag, a pasted list is split, duplicates flash, and there are suggestions and a maximum. Needs monsoon.js.InteractiveKanban boardSortable lists that share a group become kanban columns: drag cards between them, or pick one up with Space and move it to the next column with the left and right arrows. Column counts update on drop. Needs monsoon.js.InteractiveDual range sliderTwo thumbs for a minimum and a maximum over two native range inputs, which keep the values for the form. Steps, a minimum gap, formatted tooltips and the WAI-ARIA slider keys. Needs monsoon.js.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.