@svelte-put/movable
move node on mousedown
Installation
terminal
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';
</script>
<div class="grid h-20 w-20 place-items-center bg-blue-200 dark:text-black" use:movable>...</div>
Events
movable
provide two CustomEvent
s,
movablestart
and movableend,
with event.detail
set to
MovableEventDetails
.
events
<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
HTMLElement
Ancestor
Limit within an 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
delta
Limit within 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
movable
on Click
Ignore Children Nodes from Triggering 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
.
ignore
<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 ).

Happy moving! 👨💻