|
| 1 | +# @solid-primitives/drag-drop |
| 2 | + |
| 3 | +## 0.1.0-next.0 |
| 4 | + |
| 5 | +### Minor Changes |
| 6 | + |
| 7 | +- 75d2a1f: New package: `@solid-primitives/drag-drop` — composable drag-and-drop primitives for Solid 2.0. |
| 8 | + |
| 9 | + ### Exports |
| 10 | + |
| 11 | + **Pointer-event DnD** (UI element dragging): |
| 12 | + - `makeDraggable` — non-reactive base, no Solid owner required |
| 13 | + - `makeDroppable` — non-reactive drop target base |
| 14 | + - `createDraggable` — reactive draggable with `isDragging`, `transform`, auto style/class; keyboard-accessible (`Space`/`Enter` to pick up/drop, arrow keys to nudge, `Escape` to cancel) |
| 15 | + - `createDroppable` — reactive drop target with `isOver`, `active`, auto style/class |
| 16 | + - `createSortable` — combines draggable + droppable on the same element |
| 17 | + - `createDragContext` — coordinates a tree of draggables and droppables, with optional `autoScroll` near viewport edges |
| 18 | + - `arrayMove` — pure reorder helper for `onDragEnd` + `createSortable` |
| 19 | + |
| 20 | + **Native HTML5 DnD** (file drops, `draggable="true"` elements): |
| 21 | + - `makeNativeDroppable` — non-reactive base with depth-counter fix for child elements |
| 22 | + - `createNativeDroppable` — reactive native drop zone for OS file drops |
| 23 | + |
| 24 | + **Collision detection strategies** (pure functions, pass to `createDragContext`): |
| 25 | + - `closestCenter`, `closestCorners`, `rectIntersection`, `pointerWithin` (default) |
| 26 | + |
| 27 | + ### Notes |
| 28 | + - The reported `transform` is corrected for page scroll during a drag, so the dragged element doesn't visually drift from the pointer if the page scrolls mid-drag (needed for `autoScroll` to look right, and for any scrollable page in general). |
| 29 | + - `createDroppable`/`createSortable` log a dev-mode warning when used without a `createDragContext` ancestor, since `isOver`/`active` silently stay `false`/`null` in that case. |
| 30 | + - `isDragging`/`isOver` are backed by `createProjection` instead of a per-instance `active()?.id === id` memo, so a drag start/end or hover change in a large list only notifies the specific items involved. |
0 commit comments