Pacem JS - <pacem-drag-drop>

`<pacem-drag-drop>` is a *behavior*: declare it once, attach it to any element through `behaviors`, and those elements can be dragged, sorted, moved between lists.
Kanban boards, sortable playlists, "drag it into the cart".

```html
<pacem-drag-drop id="kanban" mode="alias" drop-behavior="insert" drop-targets="{{ [#todo, #done] }}"></pacem-drag-drop>

<div id="todo"><pacem-panel behaviors="{{ [#kanban] }}">Write docs</pacem-panel></div>
<div id="done"></div>
```

## Usage

**Attach it.** One `<pacem-drag-drop>` serves any number of elements: list it in their `behaviors`.
On its own, it just moves the element around; a press must last `lock-timeout` (100ms) before the drag starts,
so clicks and scrolls stay clicks and scrolls.

**Drop somewhere.** `drop-targets` lists the containers that accept drops; with `drop-behavior="insert"`
the element gets inserted where you release it: within its list (sorting) or into another one (moving).

> With `insert`, use `mode="alias"`: a clone follows the pointer while the real element waits in place,
> then moves on drop. `mode="copy"` drops a copy and leaves the original where it was.

**Grab by the handle.** `handle-selector` restricts the starting point (e.g. `.drag-handle`), so the rest of the element stays clickable and selectable.

**React.** `drop` tells where (`detail.target`) and what (`detail.element`); `dragend` comes last, dropped or not.
`draginit`, `drag` and `dragover` are cancelable: refuse a drag, or a target.

> It moves **DOM elements**, not your data: on `drop`/`dragend`, read the new order from the DOM
> (or update the model the elements were rendered from).

`spill-behavior` decides what happens when you release outside any target: `revert` (back where it was) or `remove`.

## Customization

Dragging is styled by state classes, which you can restyle with tokens alone:
- `.pacem-drag-lock`: pressed, about to drag (the theme plays a short "lift" animation);
- `.pacem-drag-floater`: what follows the pointer (the theme gives it a shadow);
- `.pacem-dragging.drag-placeholder`: the spot the element will land in (invisible, by default);
- `.pacem-dropping`: a drop target being hovered. **Not styled by the theme**: give it your own outline.

```css
#todo.pacem-dropping { outline: 2px dashed var(--pacem-color-accent); }
.pacem-dragging.drag-placeholder { opacity: .3; }
```

## Examples

### A sortable list, by the handle
Drag the songs by their ⋮⋮ handle; `dragend` reads the new order back from the DOM.

### Drag it into the cart
`mode="copy"`: products stay on the shelf, the cart gets copies. `drop` counts what landed in the cart.