{"id":13572697,"url":"https://github.com/probil/vue-moveable","last_synced_at":"2025-04-04T10:31:06.774Z","repository":{"id":45515653,"uuid":"199345967","full_name":"probil/vue-moveable","owner":"probil","description":"↔️ ↕️ 🔄  Vue.js wrapper for Moveable","archived":true,"fork":false,"pushed_at":"2021-11-09T12:52:30.000Z","size":5562,"stargazers_count":966,"open_issues_count":46,"forks_count":69,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-11-05T06:34:12.500Z","etag":null,"topics":["draggable","moveable","resizable","rotatable","scalable","vue","vue-moveable","warpable"],"latest_commit_sha":null,"homepage":"https://vue-moveable.netlify.com/","language":"Vue","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/probil.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":"probil","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-07-28T23:08:10.000Z","updated_at":"2024-06-19T05:27:16.000Z","dependencies_parsed_at":"2022-07-19T12:54:15.786Z","dependency_job_id":null,"html_url":"https://github.com/probil/vue-moveable","commit_stats":null,"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/probil%2Fvue-moveable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/probil%2Fvue-moveable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/probil%2Fvue-moveable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/probil%2Fvue-moveable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/probil","download_url":"https://codeload.github.com/probil/vue-moveable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247160373,"owners_count":20893816,"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":["draggable","moveable","resizable","rotatable","scalable","vue","vue-moveable","warpable"],"created_at":"2024-08-01T14:01:33.011Z","updated_at":"2025-04-04T10:31:05.910Z","avatar_url":"https://github.com/probil.png","language":"Vue","funding_links":["https://ko-fi.com/probil"],"categories":["Vue","Components \u0026 Libraries","UI Components [🔝](#readme)"],"sub_categories":["UI Components"],"readme":"**This project is superseded by the official Moveable Vue plugin:**\n\n* https://github.com/daybrush/moveable/tree/master/packages/vue-moveable\n* https://github.com/daybrush/moveable/tree/master/packages/vue3-moveable\n\n\u003cp align=\"middle\" \u003e\u003cimg src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/logo.png\"/\u003e\u003c/p\u003e\n\u003ch2 align=\"middle\"\u003eVue Moveable\u003c/h2\u003e\n\u003cp align=\"middle\"\u003e\n    \u003ca href=\"https://www.npmjs.com/package/moveable\" target=\"_blank\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/v/vue-moveable.svg?style=flat-square\u0026color=007acc\u0026label=version\"\n           alt=\"npm version\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/probil/vue-moveable\" target=\"_blank\"\u003e\n      \u003cimg\n        src=\"https://img.shields.io/github/stars/probil/vue-moveable.svg?color=42b883\u0026style=flat-square\"\n        alt=\"github stars\"/\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/probil/vue-moveable/blob/master/LICENSE\" target=\"_blank\"\u003e\n      \u003cimg\n        src=\"https://img.shields.io/github/license/probil/vue-moveable.svg?style=flat-square\u0026label=license\u0026color=08CE5D\"\n        alt=\"license\"\n      /\u003e\n    \u003c/a\u003e\n    \u003cimg src=\"https://img.shields.io/bundlephobia/minzip/vue-moveable?style=flat-square\" alt=\"Minified library size\"\u003e\n    \u003ca href=\"https://github.com/daybrush/moveable/tree/master/packages/react-moveable\" target=\"_blank\"\u003e\u003cimg\n      alt=\"React\"\n      src=\"https://img.shields.io/static/v1.svg?label=\u0026message=React\u0026style=flat-square\u0026color=61daeb\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/daybrush/moveable/tree/master/packages/preact-moveable\" target=\"_blank\"\u003e\u003cimg\n      alt=\"Preact\"\n      src=\"https://img.shields.io/static/v1.svg?label=\u0026message=Preact\u0026style=flat-square\u0026color=673ab8\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/daybrush/moveable/tree/master/packages/ngx-moveable\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Angular\" src=\"https://img.shields.io/static/v1.svg?label=\u0026message=Angular\u0026style=flat-square\u0026color=C82B38\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/probil/vue-moveable\" target=\"_blank\"\u003e\u003cimg\n      alt=\"Vue\"\n      src=\"https://img.shields.io/static/v1.svg?label=\u0026message=Vue\u0026style=flat-square\u0026color=3fb984\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"middle\"\u003eA Vue Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable.\u003c/p\u003e\n\u003cp align=\"middle\"\u003e\u003ca href=\"https://codesandbox.io/s/vue-template-zthzj?fontsize=14\"\u003e\u003cimg src=\"https://codesandbox.io/static/img/play-codesandbox.svg\" alt=\"Edit Vue Moveable Demo\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003ctable width=\"100%\" align=\"center\"\u003e\n\u003ctr\u003e\n\u003cth colspan=\"4\"\u003eMoveable\u003c/th\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\u003cstrong\u003eDraggable\u003c/strong\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cstrong\u003eResizable\u003c/strong\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cstrong\u003eScalable\u003c/strong\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cstrong\u003eRotatable\u003c/strong\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/draggable.gif\"\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/resizable.gif\"\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/scalable.gif\"\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/rotatable.gif\"\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\u003cstrong\u003eWarpable\u003c/strong\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cstrong\u003ePinchable\u003c/strong\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cstrong\u003eGroupable\u003c/strong\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cstrong\u003eSnappable\u003c/strong\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/warpable.gif\"\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/pinchable.gif\"\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/groupable.gif\"\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/snappable.gif\"\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\u003cstrong\u003eClippable\u003c/strong\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cstrong\u003eRoundable\u003c/strong\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cstrong\u003eOriginDraggable\u003c/strong\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cstrong\u003eSelecto\u003c/strong\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/clippable.gif\"\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/roundable.gif\"\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/origindraggable.gif\"\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/selecto.gif\"\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n\n## 🔥 Features\n* **Draggable** refers to the ability to drag and move targets.\n* **Resizable** indicates whether the target's width and height can be increased or decreased.\n* **Scalable** indicates whether the target's x and y can be scale of transform.\n* **Rotatable** indicates whether the target can be rotated.\n* **Warpable** indicates whether the target can be warped (distorted, bented).\n* **Pinchable** indicates whether the target can be pinched with draggable, resizable, scalable, rotatable.\n* **Groupable** indicates Whether the targets can be moved in group with draggable, resizable, scalable, rotatable.\n* **Snappable** indicates whether to snap to the guideline.\n* **OriginDraggable*** indicates Whether to drag origin.\n* **Clippable** indicates Whether to clip the target.\n* **Roundable** indicates Whether to show and drag or double click border-radius.\n* Support SVG Elements (svg, path, line, ellipse, g, rect, ...etc)\n* Support Major Browsers\n* Support 3d Transform\n\n## ⚙️ Installation\n```sh\n$ npm i vue-moveable\n```\n\n## 📄 Documents\n* [**Moveable Handbook**](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md)\n* [**How to use Group**](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md#toc-group)\n* [**How to use custom CSS**](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md#toc-custom-css)\n* [API Documentation](https://daybrush.com/moveable/release/latest/doc/)\n\n## 🚀 How to use\n\n```vue\n\u003ctemplate\u003e\n  \u003cMoveable\n    class=\"moveable\"\n    v-bind=\"moveable\"\n    @drag=\"handleDrag\"\n    @resize=\"handleResize\"\n    @scale=\"handleScale\"\n    @rotate=\"handleRotate\"\n    @warp=\"handleWarp\"\n    @pinch=\"handlePinch\"\n  \u003e\n    \u003cspan\u003eVue Moveable\u003c/span\u003e\n  \u003c/Moveable\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nimport Moveable from 'vue-moveable';\n\nexport default {\n  name: 'app',\n  components: {\n    Moveable,\n  },\n  data: () =\u003e ({\n    moveable: {\n      draggable: true,\n      throttleDrag: 0,\n      resizable: false,\n      throttleResize: 1,\n      keepRatio: false,\n      scalable: true,\n      throttleScale: 0,\n      rotatable: true,\n      throttleRotate: 0,\n      pinchable: true, // [\"draggable\", \"resizable\", \"scalable\", \"rotatable\"]\n      origin: false,\n    }\n  }),\n  methods: {\n    handleDrag({ target, transform }) {\n      console.log('onDrag left, top', transform);\n      target.style.transform = transform;\n    },\n    handleResize({\n      target, width, height, delta,\n    }) {\n      console.log('onResize', width, height);\n      delta[0] \u0026\u0026 (target.style.width = `${width}px`);\n      delta[1] \u0026\u0026 (target.style.height = `${height}px`);\n    },\n    handleScale({ target, transform, scale }) {\n      console.log('onScale scale', scale);\n      target.style.transform = transform;\n    },\n    handleRotate({ target, dist, transform }) {\n      console.log('onRotate', dist);\n      target.style.transform = transform;\n    },\n    handleWarp({ target, transform }) {\n      console.log('onWarp', transform);\n      target.style.transform = transform;\n    },\n    handlePinch({ target }) {\n      console.log('onPinch', target);\n    },\n  }\n}\n\u003c/script\u003e\n```\n### Calling moveable methods\nAll [moveable instance methods](https://daybrush.com/moveable/release/latest/doc/Moveable.html#methods) are supported. \nJust use reference to call them. \n\nE.g. `this.$refs.\u003cmoveable_ref\u003e.\u003cmoveable_method\u003e`.\n\nHere is an example:\n```vue\n\u003ctemplate\u003e\n  \u003cMoveable\n    ref=\"moveable\"\n    class=\"moveable\"\n  \u003e\n    \u003cspan\u003eVue Moveable\u003c/span\u003e\n  \u003c/Moveable\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nimport Moveable from 'vue-moveable';\n\nexport default {\n  name: 'app',\n  components: {\n    Moveable,\n  },\n  mounted() {\n   console.log(\"getRect: \", this.$refs.moveable.getRect()); \n   // -\u003e getRect: Object {width: 300, height: 200, left: 127, top: 120.5, pos1: Array[2]…}\n   console.log(\"isMoveableElement: \", this.$refs.moveable.isMoveableElement(document.body));\n   // -\u003e isMoveableElement: false\n\n  },\n}\n\u003c/script\u003e\n```\nDemo: https://codesandbox.io/s/vue-moveable-issue-84-xzblq\n\n## Polyfills\n\nLibrary use few browser built-ins and *doesn't* include polyfills for them. This ensures you don't include unnecessary polyfills in your code, as it should be the responsibility of the consuming app to include them.\n\n[Vue CLI includes them in babel config by default](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/babel-preset-app#polyfills) but here is a list (in case you what to add them manually):\n```\n# for core-js@2\nes6.array.filter\nes6.object.keys\nes6.symbol        # optional\n\n# for core-js@3\nes.array.filter\nes.object.keys\nes.symbol         # optional\n```\n\nFor direct usage in browser consider using https://polyfill.io/v3/\n\n\n## ⚙️ Developments\n### `npm run serve`\n\nRuns the app in the development mode.\u003cbr\u003e\nOpen [http://localhost:8080](http://localhost:8080) to view it in the browser.\n\nThe page will reload if you make edits.\u003cbr\u003e\nYou will also see any lint errors in the console.\n\n\n\n## ⭐️ Show Your Support\nPlease give a ⭐️ if this project helped you!\n\n\n## 👏 Contributing\n\nIf you have any questions or requests or want to contribute to `vue-moveable` or other packages, please write the [issue](https://github.com/probil/vue-moveable/issues) or give me a Pull Request freely.\n\n## 🐞 Bug Report\n\nIf you find a bug, please report to us opening a new [Issue](https://github.com/probil/vue-moveable/issues) on GitHub.\n\n\n## 📝 License\n\nThis project is [MIT](https://github.com/probil/vue-moveable/blob/master/LICENSE) licensed.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprobil%2Fvue-moveable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprobil%2Fvue-moveable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprobil%2Fvue-moveable/lists"}