@svelte-put/movable GitHub

move node on mousedown

@svelte-put/movable @svelte-put/movable @svelte-put/movable @svelte-put/movable changelog



npm install --save-dev @svelte-put/movable

Action Usage Notice

As with any svelte action , movable should be use with element and not component.

use:action is an element directive

<-- correct usage-->
<div use:movable />

<-- incorrect usage-->
<Component use:movable />

Quick Start

quick start

<script lang="ts">
  import { movable } from '@svelte-put/movable';

<div class="grid h-20 w-20 place-items-center bg-blue-200 dark:text-black" use:movable>...</div>

Box below can be moved around



movable provide two CustomEvent s, movablestart and movableend, with event.detail set to MovableEventDetails .


<div use:movable on:movableend on:movablestart />

Setting Limit

By default, node that uses movable can be moved freely. The limit parameter can be set to limit the "movable" zone.

Limit within Screen

Limit to the viewport by setting limit.parent to 'screen'

limit to viewport

<div use:movable={{ limit: { parent: 'screen' } }} />

Box below can be moved around, but only within viewport


screen - example source

Limit within an HTMLElement Ancestor

Limit to an ancestor by referencing limit.parent to that ancestor.

screen - example source

<div use:movable={{ limit: { parent: someNode } }} />

Box below can be moved around, but only within the violet border


ancestor limit - example source

Limit within delta

Set limit.delta to limit movable to a certain travel distance. It takes a number with unit of % or px in one or both axes, and can be set in isolation or in combination with limit.parent.

Check out the API reference for delta to see detailed explanation and examples.

limit delta

<div use:movable={{ limit: { delta: '50%' } }} />
<div use:movable={{ limit: { delta: '250px' } }} />
<div use:movable={{ limit: { delta: { x: '20%', y: '100px' } } }} />

Box below can be moved around, but only within a delta of ±100% (of box size).


delta limit - example source

Custom Handle

By default mousedown is registered on the node using movable. This can be set to another HTMLElement with the handle parameter.

custom handle

<div use:movable={{ handle: someNode }} />

Move blue box by dragging the green box


custom handle - example source

Ignore Children Nodes from Triggering movable on Click

Prefer handle in favor of ignore when possible for better predictability.

The ignore parameter takes one or more CSS selector strings and will exclude matching children of handle from trigger movable.


<div use:movable={{ ignore: '.to-ignore' }} />

mousedown on red box will not trigger movable

To ignore

ignore - example source

Disabling Cursor Handling

By default, movable adds cursor: grab to handle, and cursor: grabbing on mousedown to both handle and window.body. This can be disabled by setting the cursor parameter to false.

disabling cursor

<div use:movable={{ cursor: false }} />

Typescript Support

Ambient types for custom events should be available automatically where movable is imported.

automatically typed - example source

If the above is not working, fall back to this:

src/app.d.ts - fallback typescript support

API Reference

The best documentation is no documentation!

It is recommended to utilize editor intellisense & explore in-code documentation while using the package (and use typescript if possible 😉) .

See the extracted API Reference on github.

API extraction is powered by @microsoft/api-extractor and @microsoft/api-documenter ).

mouse click faster

Happy moving! 👨‍💻

Edit this page on GitHub