@svelte-put/movable
move node on mousedown
Installation
terminal
npm install --save-dev @svelte-put/movableQuick 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
MovableEventDetail.
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.
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
Limit to Single Axis
Set limit.delta.x or limit.delta.y to 0 to effectively disable
movement in that axis.
limit to single axis
<div use:movable={{ limit: { x: 0 } }} />
<div use:movable={{ limit: { delta: { y: 0 } } }} />Box below can be moved around only in the x axis, combined with a delta limit of ±100% (of box width).
single axis - 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
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 }} />
Happy moving! 👨💻