@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

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 MovableEventDetail.


<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.

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

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.

Automatic cursor handling is done on action initialization and update. It won't work for ignored children that are dynamically rendered at runtime. In such cases, disable cursor or add cursor styles manually to the ignored children.

disabling cursor

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

Happy moving! 👨‍💻

Edit this page on GitHub