{"id":19830510,"url":"https://github.com/thewebkid/v-movable","last_synced_at":"2025-05-01T15:30:25.321Z","repository":{"id":34871130,"uuid":"185910072","full_name":"thewebkid/v-movable","owner":"thewebkid","description":"A vue component or component wrapper that makes an element movable and its movements can be customized.","archived":false,"fork":false,"pushed_at":"2022-12-13T04:24:06.000Z","size":1243,"stargazers_count":22,"open_issues_count":28,"forks_count":8,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-21T18:54:33.739Z","etag":null,"topics":["javascript","npm-package","vue","vue-component"],"latest_commit_sha":null,"homepage":"http://preview.thewebkid.com/modules/v-movable","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"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":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-10T03:08:45.000Z","updated_at":"2023-06-21T12:00:53.000Z","dependencies_parsed_at":"2023-01-15T09:46:24.214Z","dependency_job_id":null,"html_url":"https://github.com/thewebkid/v-movable","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thewebkid%2Fv-movable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thewebkid%2Fv-movable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thewebkid%2Fv-movable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thewebkid%2Fv-movable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thewebkid","download_url":"https://codeload.github.com/thewebkid/v-movable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251898496,"owners_count":21661837,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["javascript","npm-package","vue","vue-component"],"created_at":"2024-11-12T11:23:54.189Z","updated_at":"2025-05-01T15:30:25.022Z","avatar_url":"https://github.com/thewebkid.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# v-movable [![npm version](https://badge.fury.io/js/v-movable.svg)](https://badge.fury.io/js/v-movable) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\nA vue component or component wrapper that makes an element movable and its movements can be customized.\n\n[Live Demo](http://thewebkid.com/modules/v-movable)\n\n## Installation\n    npm i --save v-movable\n\n### Initialize in main.js\n    import movable from \"v-movable\";\n    Vue.use(movable);\n\n### Options (element attributes)\n- **posTop/posLeft**: initial coordinate\n- **target**: _String (vue ref)_ - ref to element other than the component (e.g., wrap modal title in movable, and set target to the modal-body element ref)\n- **bounds**: _{x:[min,max],y:[min,max]_}. Both x and y default to [-Infinity,Infinity]. Set to [min,max] ([0,0] to restrict the axis)\n- **vertical**: _[min, max]_ - constrain movement to y axis within min and max provided. Shorthand for bounds=\"{x:[0,0],y:[min,max]}\"\n- **horizontal**: _[min, max]_ - constrain movement to x axis within min and max provided. Shorthand for bounds=\"{y:[0,0],x:[min,max]}\"\n- **grid**: _Int_ - defaults to 1. snap to grid size in pixels.\n- **shiftKey** _Bool_ - any truthy value enables shift key to constrain movement to either x or y axis (whichever is greater). Setting any bounds option automatically disables shift key behavior.\n- **disabled**: _Bool_ - disables moving\n\n### Events\n- **@start**: fires immediately after the pointerdown event on the element\n- **@move**: fires continuously while moving\n- **@complete**: fires after the pointerup event on the element\n\n### Usage\n```html\n    \u003ctemplate\u003e\n      \u003cdiv style=\"position:relative; margin:50px;\"\u003e\n         \u003cdiv class=\"testmove\" ref=\"parentEl\"\u003e\n           \u003cmovable class=\"modaltitle\" target=\"parentEl\"\u003emodal behavior\u003c/movable\u003e`\n           \u003cspan\u003enot movable\u003c/span\u003e\n         \u003c/div\u003e\n         \u003cmovable class=\"testmove\" posTop=\"444\" :grid=\"20\"\u003e\u003cspan\u003egrid:20\u003c/span\u003e\u003c/movable\u003e\n         \u003cmovable class=\"testmove\" posTop=\"222\" posLeft=\"222\" shiftKey=\"true\"\u003e\u003cspan\u003eShift Key Behavior\u003c/span\u003e\u003c/movable\u003e\n         \u003cmovable class=\"testmove\" posLeft=\"444\" :bounds=\"{x:[0,0]}\"\u003e\u003cspan\u003ebounds:only y\u003c/span\u003e\u003c/movable\u003e\n         \u003cmovable class=\"testmove\" posTop=\"444\" posLeft=\"444\" :bounds=\"{y:[0,0]}\"\u003e\u003cspan\u003ebounds:only x\u003c/span\u003e\u003c/movable\u003e\n       \u003c/div\u003e\n    \u003c/template\u003e\n    \u003cstyle\u003e\n      .testmove {\n        display:block;\n        position: absolute;\n        top: 0;\n        height: 150px;\n        width: 150px;\n        margin: 200px;\n        background: #333;\n        color: white;\n      }\n      .modaltitle {\n        background: blue;\n        display:block;\n        width:100%;\n        color: white;\n      }\n    \u003c/style\u003e\n```\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthewebkid%2Fv-movable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthewebkid%2Fv-movable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthewebkid%2Fv-movable/lists"}