@neodrag/solid

@neodrag/solid

One draggable to rule em all

A lightweight SolidJS library to make your elements draggable.

Getting Started

Features

• 🤏 Small in size - ~5KB, plugin architecture enables tree-shaking
• 🧩 Plugin-based - Mix and match only what you need
• ⚡ Performance - Event delegation, pointer capture, optimized for modern browsers
• 🎯 SolidJS Native - createDraggable, createDroppable, createSortable follow Solid naming (create* / with*)
• 🔄 Reactive - pass () => plugins; the wrapper reconciles automatically

Installing

npm install @neodrag/solid@next

Usage

Basic usage

import { createDraggable } from '@neodrag/solid';

export const App: Component = () => {
  const [draggableRef, setDraggableRef] =
    createSignal<HTMLElement | null>(null);

  createDraggable(draggableRef);

  return <div ref={setDraggableRef}>You can drag me</div>;
};

With plugins

import { createDraggable, axis, grid } from '@neodrag/solid';

export const App: Component = () => {
  const [draggableRef, setDraggableRef] =
    createSignal<HTMLElement | null>(null);

  createDraggable(draggableRef, [axis('x'), grid([10, 10])]);

  return <div ref={setDraggableRef}>Horizontal grid snapping</div>;
};

Defining plugins elsewhere with TypeScript

import {
  createDraggable,
  axis,
  bounds,
  BoundsFrom,
  type Plugin,
} from '@neodrag/solid';

export const App: Component = () => {
  const [draggableRef, setDraggableRef] =
    createSignal<HTMLElement | null>(null);

  const plugins: Plugin[] = [axis('y'), bounds(BoundsFrom.parent())];
  createDraggable(draggableRef, plugins);

  return <div ref={setDraggableRef}>Type-safe dragging</div>;
};

Getting drag state

import { createDraggable } from '@neodrag/solid';

export const App: Component = () => {
  const [draggableRef, setDraggableRef] =
    createSignal<HTMLElement | null>(null);
  const dragState = createDraggable(draggableRef);

  createEffect(() => {
    console.log('Position:', dragState().offset);
    console.log('Is dragging:', dragState().isDragging);
  });

  return (
    <div ref={setDraggableRef}>Check console while dragging</div>
  );
};

Reactive plugins with reactive plugin factories

import { createSignal } from 'solid-js';
import { createDraggable, axis } from '@neodrag/solid';

export const App: Component = () => {
	const [draggableRef, setDraggableRef] = createSignal<HTMLElement | null>(null);
	const [currentAxis, setCurrentAxis] = createSignal<'x' | 'y'>('x');


	createDraggable(draggableRef, [axisreactive plugin factories]);

	return (
		<div>
			<div ref={setDraggableRef}>Current axis: {currentAxis()}</div>
			<button onClick={() => setCurrentAxis(currentAxis() === 'x' ? 'y' : 'x')}>Switch Axis</button>
		</div>
	);
};

Sortable lists

import { createSortable, createSortableItem } from '@neodrag/solid/sortable';

const { list, dropRef } = createSortable({
  items,
  keyBy: (i) => i.id,
  onReorder: setItems,
});

// <ul ref={dropRef}> … createSortableItem(list, item.id) per row

Read the docs

Credits

Inspired by react-draggable, but with a modern plugin architecture and optimized for performance.

License

MIT License © Puru Vijay