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.94KB for Svelte to 2.18KB for React.

_{*Sizes in brotli after terser minification}

1.94 KB

1.98 KB

2 KB

2.18 KB

SSR-friendly

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

Feature rich

Play with the kitchen sink demo below

You can only drag it within these constraints

100

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! 😉