@neodrag/solid
One draggable to rule em all
A lightweight SolidJS directive to make your elements draggable.
Getting Started
# 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
```bash
pnpm add @neodrag/solid
# npm
npm install @neodrag/solid
# yarn
yarn add @neodrag/solid
```
# Usage
Basic usage
```tsx
import { createDraggable } from '@neodrag/solid';
export const App: Component = () => {
const { draggable } = createDraggable();
return You can drag me
;
};
```
With options
```tsx
import { createDraggable } from '@neodrag/solid';
const { draggable } = createDraggable();
I am draggable
;
```
Defining options elsewhere with typescript
```tsx
import { createDraggable, type DragOptions } from '@neodrag/solid';
const options: DragOptions = {
axis: 'y',
bounds: 'parent',
};
const { draggable } = createDraggable();
I am draggable
;
```
Reactive options:
```tsx
import { createSignal } from 'solid-js';
import { createDraggable } from '@neodrag/solid';
const [options, setOptions] = createSignal({
axis: 'y',
bounds: 'parent',
});
I am draggable
;
// You can update `options` with `setOptions` anytime and it'll change. Neodrag will automatically update to the new options 😉
```
Read the docs
## Credits
Inspired from the amazing [react-draggable](https://github.com/react-grid-layout/react-draggable) library, and implements even more features with a similar API, but 3.7x smaller.
# License
MIT License © Puru Vijay