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

Installing

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

Usage

Basic usage

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

<div use:draggable>Hello</div>

With options

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

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

Defining options elsewhere with typescript

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

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

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

Read the docs

Credits

Inspired from the amazing react-draggable library, and implements a similar API, but 3x smaller.

License

MIT License © Puru Vijay