# @neodrag/svelte

> Svelte Action to add dragging to your apps 😉

Latest version **2.3.3** (published 2025-06-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @neodrag/svelte
pnpm add @neodrag/svelte
yarn add @neodrag/svelte
bun add @neodrag/svelte
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 2.3.3 |
| Published | 2025-06-18 |
| First published | 2022-01-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 32.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2452 |
| Author | Puru Vijay |
| Maintainers | puruvj |
| Keywords | draggable, svelte, react-draggable, drag, svelte, small, tiny, performant, neodrag |

## Links

- npm: https://www.npmjs.com/package/@neodrag/svelte
- Repository: https://github.com/PuruVJ/neodrag
- Homepage: https://neodrag.dev/docs/svelte
- Issues: https://github.com/PuruVJ/neodrag/issues
- npm.io page: https://npm.io/package/@neodrag/svelte

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.3.3 (latest) — 2025-06-18
- 3.0.0-next.12 (next) — 2026-08-10
- 3.0.0-next.11 — 2026-08-10
- 3.0.0-next.10 — 2026-08-02
- 3.0.0-next.8 — 2025-08-03
- 3.0.0-next.7 — 2025-07-17
- 3.0.0-next.6 — 2025-07-09
- 3.0.0-next.5 — 2025-07-08
- 3.0.0-next.4 — 2025-06-26
- 3.0.0-next.3 — 2025-06-23
- 3.0.0-next.2 — 2025-06-21
- 3.0.0-next.1 — 2025-06-21
- 3.0.0-next.0 — 2025-06-21
- 2.3.2 — 2025-03-09
- 2.3.1 — 2025-02-22
- … 29 more at https://npm.io/package/@neodrag/svelte/versions

## README

<p align="center">
<a href="https://www.neodrag.dev"><img src="https://www.neodrag.dev/logo.svg" height="150" /></a>
</p>

<h1 align="center">
@neodrag/svelte
</h1>

<h2 align="center">
One draggable to rule em all
</h2>

<p align="center">A lightweight Svelte action to make your elements draggable.</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@neodrag/svelte"><img src="https://img.shields.io/npm/v/@neodrag/svelte?color=e63900&label="></a>
<p>

<p align="center"><a href="https://www.neodrag.dev/docs/svelte">Getting Started</a></p>

# Features

- 🤏 Tiny - Only 1.68KB min+brotli.
- 🐇 Simple - Quite simple to use, and effectively no-config required!
- 🧙‍♀️ Elegant - Svelte Action, to keep the usage simple, elegant and expressive.
- 🗃️ 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 🙂**

[Try it in Svelte REPL](https://svelte.dev/repl/fc972f90450c4945b6f2481d13eafa00?version=3.38.3)

# Installing

```bash
pnpm add @neodrag/svelte

# npm
npm install @neodrag/svelte

# yarn
yarn add @neodrag/svelte
```

# Migrating from svelte-drag

svelte-drag is the predecessor of this package. To migrate, follow this short guide: [svelte-drag to @neodrag/svelte migration guide](https://www.neodrag.dev/docs/migrating/svelte-drag)

# Usage

Basic usage

```svelte
<script>
  import { draggable } from '@neodrag/svelte';
</script>

<div use:draggable>Hello</div>
```

With options

```svelte
<script>
  import { draggable } from '@neodrag/svelte';
</script>

<div use:draggable={{ axis: 'x', grid: [10, 10] }}>Hello</div>
```

Defining options elsewhere with typescript

```svelte
<script lang="ts">
  import { draggable, type DragOptions } from '@neodrag/svelte';

  let options: DragOptions = {
    axis: 'y',
    bounds: 'parent',
  };
</script>

<div use:draggable={options}>Hello</div>
```

<a href="https://www.neodrag.dev/docs/svelte" style="font-size: 2rem">Read the docs</a>

## Credits

Inspired from the amazing [react-draggable](https://github.com/react-grid-layout/react-draggable) library, and implements a similar API, but 3x smaller.

# License

MIT License &copy; Puru Vijay

---
_Source: https://npm.io/package/@neodrag/svelte · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._