\  
Movable element - simple and robust. A wrapper web component that can enable customizable element move operations and expose pointer state data.
Live Demo
Since this is a Lit 3 web component, this will work inside any SPA framework. React integration docs. Framework-agnostic web components are the future!
Installation
``bash
npm i lit-movable
`
Basic Usage
`html
I am movable
`
$3
-
posTop: _Number_ - Represents the offsetTop/Left value (reflected). When set, will set the initial _style.top_ value. Updates with move events
-
posTop: _Number_ - Represents the offsetLeft value (reflected). When set, will set the initial style.top value. Updates with move events
-
targetSelector: _String_ - A selector to select the element that will move. Defaults to the lit-movable (this) element, but useful when for example you want to allow a modal header to respond to pointer events but you want the entire modal to move.
-
boundsX: _String: boundsX="min,max"_ Defaults to -Infinity,Infinity. Set to restrict movement along the x axis.
-
boundsY: _String: boundsY="min,max"_ Defaults to -Infinity,Infinity. Set to restrict movement along the y axis.
-
vertical: _String: vertical="min,max"_ - Will constrain horizontal (x) movement completely and allow vertical (y) movement between the specified values.
-
horizontal: _String: horizontal="min,max"_ - Will constrain vertical (y) movement completely and allow horizontal (x) movement between the specified values.
-
grid: _Number_ - Snaps movement to nearest grid position (defaults to 1). Initial element position represents the 0,0 position. Movement snapped to the provided value increment
-
shiftKey _Bool_ - When enabled, holding the shift key will coerce movement to perpendicular coordinates only.
-
disabled: _Bool_ - Disables movement behavior.
-
eventsOnly: _Bool_ - (advanced) Only fires movement events, but will not move the element.
Events
Lit-Movable exposes events as either callback properties or the built in custom events.
$3
-
onmovestart: called immediately after the pointerdown event on the element
-
onmove: called continuously while moving
-
onmoveend: called after the pointerup event on the element
$3
-
movestart: fires immediately after the pointerdown event on the element
-
move: fires continuously while moving
-
moveend: fires after the pointerup event on the element
$3
`
html
`
More usage examples
#### Modal behavior
Parent moves when title is dragged. Used targetSelector attribute.
`
html
I am a draggable title
I am not directly grabbable, but I will move if you grab my title.
`
#### Horizontal only
Constrain vertical movement. Allow -50 -> 250 horizontal movement. Here are two ways to accomplish the identical behavior.
`
html
Move me horizontally
Move me horizontally
`
#### Vertical only
Two identical ways to constrain horizontal movement, but enable broad vertical motion.
`
html
Move me vertically
Move me horizontally
`
#### Snapping / shift key option enabled
Snaps to a 50px grid with shift key behavior.
`
html
my grid is 50
(try holding shift while dragging)
`
#### Constrain both directions
Start in middle of a constrained box.
`
html
`
Run local
Uses vite. Will run on node 16+ but will complain about compatibility if you are stuck on node 16 like me. Ignore this. It's fine.
`
bash
git clone https://github.com/thewebkid/lit-movable.git
cd ./lit-movable
npm i
npm dev
``