Package Exports
- @neodrag/solid
- @neodrag/solid/package.json
Readme
@neodrag/solid
One draggable to rule em all
A lightweight SolidJS directive to make your elements draggable.
Features
- 🤏 Tiny - Only 1.75KB min+brotli.
- 🐇 Simple - Quite simple to use, and effectively no-config required!
- 🧙♀️ Elegant - SolidJS directive, to keep the usage simple, elegant and straightforward.
- 🗃️ Highly customizable - Offers tons of options that you can modify to get different behavior.
- ⚛️ Reactive - Change options passed to it on the fly, it will just work 🙂
Installing
pnpm add @neodrag/solid
# npm
npm install @neodrag/solid
# yarn
yarn add @neodrag/solidUsage
Basic usage
import { createDraggable } from '@neodrag/solid';
export const App: Component = () => {
const { draggable } = createDraggable();
return <div use:draggable>You can drag me</div>;
};With options
import { createDraggable } from '@neodrag/solid';
const { draggable } = createDraggable();
<div use:draggable={{ axis: 'x', grid: [10, 10] }}>I am draggable</div>;Defining options elsewhere with typescript
import { createDraggable, type DragOptions } from '@neodrag/solid';
const options: DragOptions = {
axis: 'y',
bounds: 'parent',
};
const { draggable } = createDraggable();
<div use:draggable={options}>I am draggable</div>;Reactive options:
import { createSignal } from 'solid-js';
import { createDraggable } from '@neodrag/solid';
const [options, setOptions] = createSignal({
axis: 'y',
bounds: 'parent',
});
<div use:draggable={options()}>I am draggable</div>;
// You can update `options` with `setOptions` anytime and it'll change. Neodrag will automatically update to the new options 😉Credits
Inspired from the amazing react-draggable library, and implements even more features with a similar API, but 3.7x smaller.
License
MIT License © Puru Vijay