Neodrag

One draggable to rule them all




Features




Multi-framework

One tool, endless possibilities: integrate with Svelte, Vue, React, Solid, and more.

Core logic is implemented only once, so you can use Neodrag in different frameworks, and get the same predictible behavior



npm install @neodrag/ svelte

Small bundle size

Neodrag will never be heavy on your app. It's designed to be as small as possible, so you can use it without worrying about your bundle size.


Ranges from 1.70KB for Svelte to 1.98KB for React.

*Sizes in brotli after terser minification



1.70 KB
1.77 KB
1.79 KB
1.81 KB
1.98 KB

SSR-friendly

Neodrag is Server Side Renderable. Will play well with meta-frameworks like Sveltekit, NextJS, Nuxt, Vitepress, SolidStart and more

Metaframeworks

Feature rich

Play with the kitchen sink demo below



You can only drag it within these constraints
100
100
200
200
I will drag in all directions
I will drag horizontally
I will drag vertically
axis: none disables dragging
I track my position: x: 0
y: 0
I can only be dragged by the handle 👆
I can be dragged with all the handles
I can be dragged anywhere
I snap to 25x25 grid
I snap to 100x25 grid
I can be dragged within my parents container only
I can be dragged within the body
Bounds top: 20
bottom: 50
left: 200
right: 400
I will return to my position on drop
I will return to my position on drop, but with style! 😉
disabled: true Can't drag me at all

Pick your framework