@svelte-put/movable
move node on mousedown
Installation
terminal
npm install --save-dev @svelte-put/movableAction 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
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.
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! 👨💻