{"id":14990276,"url":"https://github.com/thewebkid/lit-movable","last_synced_at":"2026-02-26T03:33:30.742Z","repository":{"id":207046549,"uuid":"718314706","full_name":"thewebkid/lit-movable","owner":"thewebkid","description":"A Lit 3 wrapper web component that can enable robustly customizable element move operations and expose rich state data.","archived":false,"fork":false,"pushed_at":"2026-01-14T07:37:35.000Z","size":369,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-14T11:24:42.651Z","etag":null,"topics":["draggable","draggable-elements","lit","lit-element","movable","web-component"],"latest_commit_sha":null,"homepage":"https://thewebkid.com/modules/lit-movable","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thewebkid.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-11-13T20:37:05.000Z","updated_at":"2026-01-14T07:37:40.000Z","dependencies_parsed_at":"2024-01-17T04:15:12.861Z","dependency_job_id":"bf0a536d-e43d-4973-830b-a47e513dc2b2","html_url":"https://github.com/thewebkid/lit-movable","commit_stats":{"total_commits":25,"total_committers":1,"mean_commits":25.0,"dds":0.0,"last_synced_commit":"3766a7d80e11a5d9c8175ee6602e8a59526bac8a"},"previous_names":["thewebkid/lit-movable"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/thewebkid/lit-movable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thewebkid%2Flit-movable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thewebkid%2Flit-movable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thewebkid%2Flit-movable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thewebkid%2Flit-movable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thewebkid","download_url":"https://codeload.github.com/thewebkid/lit-movable/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thewebkid%2Flit-movable/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29848648,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-25T22:37:40.667Z","status":"online","status_checked_at":"2026-02-26T02:00:06.774Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["draggable","draggable-elements","lit","lit-element","movable","web-component"],"created_at":"2024-09-24T14:19:48.854Z","updated_at":"2026-02-26T03:33:30.695Z","avatar_url":"https://github.com/thewebkid.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \\\u003clit-movable\u003e [![npm version](https://badge.fury.io/js/lit-movable.svg)](https://badge.fury.io/js/lit-movable) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nMovable element - simple and robust. A wrapper web component that can enable customizable element move operations and expose pointer state data.\n\n[Live Demo](http://thewebkid.com/modules/lit-movable)\n\nSince this is a [Lit 3 web component](https://lit.dev/), this will work inside any SPA framework. [React integration docs](https://lit.dev/docs/frameworks/react/). Framework-agnostic web components are the future!\n\n## Installation\n\n```bash\nnpm i lit-movable\n```\n\n## Basic Usage\n\n```html\n\u003cscript type=\"module\"\u003e\n  import {LitMovable} from 'lit-movable';\n\u003c/script\u003e\n\u003clit-movable\u003e\n  \u003cdiv style=\"background:lightsteelblue\"\u003eI am movable\u003c/div\u003e\n\u003c/lit-movable\u003e\n```\n\n\n### Attributes\n- **posTop**: _Number_ - Represents the offsetTop/Left value (reflected). When set, will set the initial _style.top_ value. Updates with move events\n- **posTop**: _Number_ - Represents the offsetLeft value (reflected). When set, will set the initial style.top value. Updates with move events\n- **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.\n- **boundsX**: _String: boundsX=\"min,max\"_ Defaults to -Infinity,Infinity. Set to restrict movement along the x axis.\n- **boundsY**: _String: boundsY=\"min,max\"_ Defaults to -Infinity,Infinity. Set to restrict movement along the y axis.\n- **vertical**: _String: vertical=\"min,max\"_ - Will constrain horizontal (x) movement completely and allow vertical (y) movement between the specified values.\n- **horizontal**: _String: horizontal=\"min,max\"_ - Will constrain vertical (y) movement completely and allow horizontal (x) movement between the specified values.\n- **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\n- **shiftKey** _Bool_ - When enabled, holding the shift key will coerce movement to perpendicular coordinates only.\n- **disabled**: _Bool_ - Disables movement behavior.\n- **eventsOnly**: _Bool_ - (advanced) Only fires movement events, but will not move the element.\n\n\n## Events \nLit-Movable exposes events as either callback properties or the built in custom events.\n\n### Event Properties\n- **onmovestart**: called immediately after the pointerdown event on the element\n- **onmove**: called continuously while moving\n- **onmoveend**: called after the pointerup event on the element\n\n### Custom Events\n- **movestart**: fires immediately after the pointerdown event on the element\n- **move**: fires continuously while moving\n- **moveend**: fires after the pointerup event on the element\n\n### Event binding examples\n```html\n\u003clit-movable id=\"myMovable\"\u003e\u003c/lit-movable\u003e\n\u003cscript\u003e\n  const movableEl = document.getElementById(\"myMovable\");\n  /* Bind As property */\n  movableEl.onmove = (moveState)=\u003e{\n    const {coords, clickOffset, mouseCoord, moveDist, startCoord, totalDist} = moveState;\n    //all coordinates expose x,y,top,left\n    console.log(coords);//Current element pos  \n    console.log(clickOffset);// the position of the pointer relative to the top/left of the element\n    console.log(mouseCoord); // current mouse pos on page - equivalent of pageX/pageY on a mouse event\n    console.log(moveDist); //distance moved since previous move operation\n    console.log(startCoord); //position of element on pointerdown\n    console.log(totalDist);//distance moved from pointerdown to pointerup\n  }\n  /* Custom Event */\n  movableEl.addEventListener('move', (event) =\u003e {\n    const moveState = event.detail;\n    console.log({moveState});//same state object as above\n  });\n\u003c/script\u003e\n \n```\n\n## More usage examples\n\n#### Modal behavior\nParent moves when title is dragged. Used targetSelector attribute.\n```html\n  \u003cdiv style=\"height:200px;width:200px;border:solid 1px blue;\" id=\"dialog\"\u003e\n    \u003clit-movable targetSelector=\"#dialog\"\u003e\n      \u003cdiv style=\"background:lightsteelblue;width:100%\"\u003eI am a draggable title\u003c/div\u003e\n    \u003c/lit-movable\u003e\n    I am not directly grabbable, but I will move if you grab my title.\n  \u003c/div\u003e\n```\n\n#### Horizontal only\nConstrain vertical movement. Allow -50 -\u003e 250 horizontal movement. Here are two ways to accomplish the identical behavior.\n```html\n    \u003c!-- Set horizontal movement only --\u003e\n    \u003clit-movable horizontal=\"-50,250\"\u003e\n      \u003cdiv style=\"background:lightsteelblue\"\u003eMove me horizontally\u003c/div\u003e\n    \u003c/lit-movable\u003e\n\n  \u003c!-- OR --\u003e\n  \u003c!-- Explicit x/y boundaries. Null string constrains an axis --\u003e\n  \u003clit-movable boundsX=\"-50,250\" boundsY=\"null\"\u003e\n    \u003cdiv style=\"background:lightsteelblue\"\u003eMove me horizontally\u003c/div\u003e\n  \u003c/lit-movable\u003e\n```\n\n#### Vertical only\nTwo identical ways to constrain horizontal movement, but enable broad vertical motion. \n```html\n  \u003c!-- Set vertical movement only --\u003e\n  \u003clit-movable vertical=\"-999,9999\"\u003e\n    \u003cdiv style=\"background:lightsteelblue\"\u003eMove me vertically\u003c/div\u003e\n  \u003c/lit-movable\u003e\n  \u003c!-- Alternate explicit bounds (x,y) equivalent. Null = no movement enabled --\u003e\n  \u003clit-movable boundsY=\"-999,9999\" boundsX=\"null\"\u003e\n    \u003cdiv style=\"background:lightsteelblue\"\u003eMove me horizontally\u003c/div\u003e\n  \u003c/lit-movable\u003e\n```\n\n#### Snapping / shift key option enabled\nSnaps to a 50px grid with shift key behavior.\n```html\n  \u003clit-movable grid=\"50\" shiftBehavior=\"true\"\u003e\n    \u003cdiv style=\"background:lightsteelblue\"\u003emy grid is 50 \u003cbr\u003e(try holding shift while dragging)\u003c/div\u003e\n  \u003c/lit-movable\u003e\n```\n\n#### Constrain both directions\nStart in middle of a constrained box.\n```html\n  \u003cdiv style=\"height:200px;width:200px;border:solid 1px green;position:relative\"\u003e\n    \u003clit-movable posTop=\"100\" posLeft=\"100\" boundsX=\"-100,100\" boundsY=\"-100,100\"\u003e\n      \u003cdiv style=\"background:lightsteelblue;width:30px;margin-left:-15px;height:18px;margin-top:-9px\"\u003e\n        box\n      \u003c/div\u003e\n    \u003c/lit-movable\u003e\n  \u003c/div\u003e\n```\n\n\n## Run local\nUses 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.\n```bash\ngit clone https://github.com/thewebkid/lit-movable.git\ncd ./lit-movable\nnpm i\nnpm dev\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthewebkid%2Flit-movable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthewebkid%2Flit-movable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthewebkid%2Flit-movable/lists"}