Solid simple dnd
The library is to provide simple drag and drop functionality for solid-js.
It calculates dragging ref’s position and translate based on DOM interaction. Solid-js reactivity is doing the work to keep the DOM updated.
It comprises several small building blocks so that users can construct drag and drop functionality based on what they need.
Storybook contains examples on how to construct them together.
Draggable contains ref that users can drag around.
If you want to add data to
Draggable, you can add object to it, otherwise you can keep object
Draggable, you can use
Draggable should be added to
DraggableActions as part of
It should allow start, move, scroll, end, cancel events to happen on dragging
DraggableActions delegates most of the functionalities to its
Sensor senses start, move, scroll, end, or cancel events on dragging
Draggable. It should modify the events accordingly before they are applied to dragging
Most of the time you will need at least a
MouseSensor and a
MouseSensorsenses mouse events and movement. To start dragging, you can use
ScrollSensorsenses the scroll movement of dragging ref’s scrollable parents to update dragging ref’s position.
MouseSensor is a
Activatable and it requires
Activator to determine when to start dragging.
Activator checks when
Activatable (for example
MouseSensor) should start.
The simplest way to start dragging is to use
Detector returns list of
otherRefs, depending on their position and size in relation to
It can be used to detect if
Draggable should be dropped in a
It can also be used to detect if
Draggable can be sorted against other
Overlay is a component you can drag around without displacing
Droppable and Sortable
Sortable are implemented as
Animation is not yet implemented, but it can be added as a
Sensor so that you can call
There is an example
Auto-scroll is yet implemented, but similarly it can be added as a
The library uses
pnpm as package manager.
pnpm lintto check
pnpm buildto build using
pnpm testto run unit tests using Jest
pnpm test:playwrightto run browser tests using Playwright
pnpm storybookto open storybook with all possible examples
WindowSensor does not work yet.