Neodrag: One draggable to rule them all

One draggable to rule them all

Features

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

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.97KB for Svelte to 2.2KB for React.

_{*Sizes in brotli after terser minification}

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

Metaframeworks

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

disabled: true Can't drag me at all