repository·main·Indexed 25 days ago
https://github.com/puruvj/neodragA multi-framework dragging library providing a consistent API across React, Vue, Svelte, Solid, and Vanilla JavaScript. It includes specialized packages (@neodrag/react, @neodrag/vue, @neodrag/svelte, @neodrag/solid, @neodrag/vanilla) that support features such as axis restriction, grid snapping, and bounding constraints via DragOptions.
In uncontrolled mode, the user drags the element and it changes position. You can use the drag events to sync the library's internal state with your own application state.
You can programmatically move an element by providing a position object: { x: number, y: number }.
Note: When you change position, the element moves, but user interaction does not automatically update your position state variable. To keep your state in sync, you must use the drag event handlers to update your state.
To prevent user interaction from moving the element and allow only programmatic movement, set the disabled option to true.
// Strictly controlled example
useDraggable(draggableRef, {
position: { x: 0, y: 10 },
disabled: true,
});Neodrag follows a philosophy inspired by react-draggable regarding controlled and uncontrolled components.
Your application does not manage the position. The user drags the element, it moves, and you can react to the movement via events. You do not manually set the position.
You programmatically set the position using the position property (e.g., { x: 10, y: 50 }).
Important Note on Two-Way Binding:
Neodrag is not fully controlled. When you change the position via state, the element moves. However, when a user drags the element, the internal state changes but your position state variable does not automatically update. To keep your state in sync, you must use the onDrag event to update your state variable with the new coordinates.
To prevent user interaction and allow only programmatic movement, set the disabled option to true:
<div use:draggable={{ position: { x: 0, y: 10 }, disabled: true }} />The project follows a standard Astro directory structure:
src/pages/: Contains .astro or .md files. Each file in this directory is automatically exposed as a route based on its filename.src/components/: A recommended location for storing Astro, React, Vue, Svelte, or Preact components.src/layouts/: Typically used for defining page layouts.public/: Stores static assets like images and favicons that are served directly.package.json: Defines project dependencies and scripts.Neodrag follows a philosophy inspired by react-draggable regarding state control:
position: { x: 10, y: 50 }).Important Note on Controlled Mode: The library does not support full two-way data binding. When a user drags an element, the internal position changes, but your external position variable will not automatically update. To keep your state in sync, you must use the onDrag event to update your state variable with the new coordinates.
To make an element strictly controlled (preventing user interaction and only allowing programmatic movement), set the disabled option to true.
Neodrag supports two modes of interaction:
The user drags the element, and the element changes position. Your application reacts to these changes (e.g., via onDrag) but does not dictate the position.
You programmatically set the element's position using the position property (e.g., { x: 10, y: 50 }).
Important Note on Two-Way Binding:
When you change position, the element moves. However, when a user drags the element, the internal position property is not automatically updated. To keep your application state in sync with the user's manual dragging, you must use the onDrag event to update your state.
To prevent user interaction and allow only programmatic movement, set the disabled option to true.
new Draggable({ position: { x: 0, y: 10 }, disabled: true });new Draggable({ position: { x: 0, y: 10 }, disabled: true });@neodrag/svelte supports two modes of interaction:
The element's position is managed internally by the library. The user drags the element, and you can react to the movement using the on:neodrag event.
You can programmatically set the element's position using the position property (e.g., { x: 10, y: 50 }).
Important: The library is not fully controlled. When a user drags the element, the internal state changes, but your position variable will not automatically update. To keep your state in sync, you must use the on:neodrag event to update your state variable.
To prevent user interaction and only allow programmatic movement, set disabled: true in the options:
<div use:draggable={{ position: { x: 0, y: 10 }, disabled: true }} />To set up the Solid demo project, install the dependencies using your preferred package manager. While the template includes a pnpm-lock.yaml (maintained via pnpm up -Lri), you can use npm, pnpm, or yarn to install.
$ npm install # or pnpm install or yarn installnpm dev or npm start. The application will be available at http://localhost:3000 and will automatically reload when you make changes to the code.You can install the @neodrag/react package using your preferred package manager.
# npm
npm install @neodrag/react
# yarn
yarn add @neodrag/react
# pnpm
pnpm add @neodrag/reactYou can pass configuration options to the use:draggable directive. These options can be defined inline or as a separate object. Because it is integrated with SolidJS, you can pass a reactive signal to the directive, and Neodrag will automatically update when the signal changes.
Inline options:
<div use:draggable={{ axis: 'x', grid: [10, 10] }}>I am draggable</div>;Using TypeScript types:
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 with signals:
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>;
// Updating `setOptions` will automatically update the draggable behavior.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>;svelte-drag, follow the official migration guide at https://www.neodrag.dev/docs/migrating/svelte-drag to ensure a smooth transition.