MIT)

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

box



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