[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9051":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":20,"defaultBranch":21,"hasWiki":20,"hasPages":20,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":16,"starSnapshotCount":16,"syncStatus":14,"lastSyncTime":33,"discoverSource":34},9051,"vue-moveable","probil\u002Fvue-moveable","probil","↔️ ↕️ 🔄  Vue.js wrapper for Moveable","https:\u002F\u002Fvue-moveable.netlify.com\u002F",null,"Vue",960,67,2,39,0,49.5,"MIT License",true,false,"master",[23,24,25,26,27,28,5,29],"draggable","moveable","resizable","rotatable","scalable","vue","warpable","2026-06-12 04:00:42","**This project is superseded by the official Moveable Vue plugin:**\n\n* https:\u002F\u002Fgithub.com\u002Fdaybrush\u002Fmoveable\u002Ftree\u002Fmaster\u002Fpackages\u002Fvue-moveable\n* https:\u002F\u002Fgithub.com\u002Fdaybrush\u002Fmoveable\u002Ftree\u002Fmaster\u002Fpackages\u002Fvue3-moveable\n\n\u003Cp align=\"middle\" >\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fdaybrush\u002Fmoveable\u002Fmaster\u002Fdemo\u002Fimages\u002Flogo.png\"\u002F>\u003C\u002Fp>\n\u003Ch2 align=\"middle\">Vue Moveable\u003C\u002Fh2>\n\u003Cp align=\"middle\">\n    \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fmoveable\" target=\"_blank\">\n      \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fvue-moveable.svg?style=flat-square&color=007acc&label=version\"\n           alt=\"npm version\" \u002F>\u003C\u002Fa>\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fprobil\u002Fvue-moveable\" target=\"_blank\">\n      \u003Cimg\n        src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fprobil\u002Fvue-moveable.svg?color=42b883&style=flat-square\"\n        alt=\"github stars\"\u002F>\u003C\u002Fa>\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fprobil\u002Fvue-moveable\u002Fblob\u002Fmaster\u002FLICENSE\" target=\"_blank\">\n      \u003Cimg\n        src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fprobil\u002Fvue-moveable.svg?style=flat-square&label=license&color=08CE5D\"\n        alt=\"license\"\n      \u002F>\n    \u003C\u002Fa>\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbundlephobia\u002Fminzip\u002Fvue-moveable?style=flat-square\" alt=\"Minified library size\">\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fdaybrush\u002Fmoveable\u002Ftree\u002Fmaster\u002Fpackages\u002Freact-moveable\" target=\"_blank\">\u003Cimg\n      alt=\"React\"\n      src=\"https:\u002F\u002Fimg.shields.io\u002Fstatic\u002Fv1.svg?label=&message=React&style=flat-square&color=61daeb\">\u003C\u002Fa>\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fdaybrush\u002Fmoveable\u002Ftree\u002Fmaster\u002Fpackages\u002Fpreact-moveable\" target=\"_blank\">\u003Cimg\n      alt=\"Preact\"\n      src=\"https:\u002F\u002Fimg.shields.io\u002Fstatic\u002Fv1.svg?label=&message=Preact&style=flat-square&color=673ab8\">\u003C\u002Fa>\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fdaybrush\u002Fmoveable\u002Ftree\u002Fmaster\u002Fpackages\u002Fngx-moveable\" target=\"_blank\">\n    \u003Cimg alt=\"Angular\" src=\"https:\u002F\u002Fimg.shields.io\u002Fstatic\u002Fv1.svg?label=&message=Angular&style=flat-square&color=C82B38\">\n    \u003C\u002Fa>\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fprobil\u002Fvue-moveable\" target=\"_blank\">\u003Cimg\n      alt=\"Vue\"\n      src=\"https:\u002F\u002Fimg.shields.io\u002Fstatic\u002Fv1.svg?label=&message=Vue&style=flat-square&color=3fb984\">\u003C\u002Fa>\n\u003C\u002Fp>\n\u003Cp align=\"middle\">A Vue Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable.\u003C\u002Fp>\n\u003Cp align=\"middle\">\u003Ca href=\"https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fvue-template-zthzj?fontsize=14\">\u003Cimg src=\"https:\u002F\u002Fcodesandbox.io\u002Fstatic\u002Fimg\u002Fplay-codesandbox.svg\" alt=\"Edit Vue Moveable Demo\">\u003C\u002Fa>\u003C\u002Fp>\n\u003Ctable width=\"100%\" align=\"center\">\n\u003Ctr>\n\u003Cth colspan=\"4\">Moveable\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Cstrong>Draggable\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cstrong>Resizable\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cstrong>Scalable\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cstrong>Rotatable\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\n\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fdaybrush\u002Fmoveable\u002Fmaster\u002Fdemo\u002Fimages\u002Fdraggable.gif\">\n\u003C\u002Ftd>\n\u003Ctd align=\"center\">\n\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fdaybrush\u002Fmoveable\u002Fmaster\u002Fdemo\u002Fimages\u002Fresizable.gif\">\n\u003C\u002Ftd>\n\u003Ctd align=\"center\">\n\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fdaybrush\u002Fmoveable\u002Fmaster\u002Fdemo\u002Fimages\u002Fscalable.gif\">\n\u003C\u002Ftd>\n\u003Ctd align=\"center\">\n\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fdaybrush\u002Fmoveable\u002Fmaster\u002Fdemo\u002Fimages\u002Frotatable.gif\">\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Cstrong>Warpable\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cstrong>Pinchable\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cstrong>Groupable\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cstrong>Snappable\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fdaybrush\u002Fmoveable\u002Fmaster\u002Fdemo\u002Fimages\u002Fwarpable.gif\">\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fdaybrush\u002Fmoveable\u002Fmaster\u002Fdemo\u002Fimages\u002Fpinchable.gif\">\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fdaybrush\u002Fmoveable\u002Fmaster\u002Fdemo\u002Fimages\u002Fgroupable.gif\">\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fdaybrush\u002Fmoveable\u002Fmaster\u002Fdemo\u002Fimages\u002Fsnappable.gif\">\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Cstrong>Clippable\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cstrong>Roundable\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cstrong>OriginDraggable\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cstrong>Selecto\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fdaybrush\u002Fmoveable\u002Fmaster\u002Fdemo\u002Fimages\u002Fclippable.gif\">\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fdaybrush\u002Fmoveable\u002Fmaster\u002Fdemo\u002Fimages\u002Froundable.gif\">\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fdaybrush\u002Fmoveable\u002Fmaster\u002Fdemo\u002Fimages\u002Forigindraggable.gif\">\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fdaybrush\u002Fmoveable\u002Fmaster\u002Fdemo\u002Fimages\u002Fselecto.gif\">\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\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:\u002F\u002Fgithub.com\u002Fdaybrush\u002Fmoveable\u002Fblob\u002Fmaster\u002Fhandbook\u002Fhandbook.md)\n* [**How to use Group**](https:\u002F\u002Fgithub.com\u002Fdaybrush\u002Fmoveable\u002Fblob\u002Fmaster\u002Fhandbook\u002Fhandbook.md#toc-group)\n* [**How to use custom CSS**](https:\u002F\u002Fgithub.com\u002Fdaybrush\u002Fmoveable\u002Fblob\u002Fmaster\u002Fhandbook\u002Fhandbook.md#toc-custom-css)\n* [API Documentation](https:\u002F\u002Fdaybrush.com\u002Fmoveable\u002Frelease\u002Flatest\u002Fdoc\u002F)\n\n## 🚀 How to use\n\n```vue\n\u003Ctemplate>\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  >\n    \u003Cspan>Vue Moveable\u003C\u002Fspan>\n  \u003C\u002FMoveable>\n\u003C\u002Ftemplate>\n\u003Cscript>\nimport Moveable from 'vue-moveable';\n\nexport default {\n  name: 'app',\n  components: {\n    Moveable,\n  },\n  data: () => ({\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, \u002F\u002F [\"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] && (target.style.width = `${width}px`);\n      delta[1] && (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\u002Fscript>\n```\n### Calling moveable methods\nAll [moveable instance methods](https:\u002F\u002Fdaybrush.com\u002Fmoveable\u002Frelease\u002Flatest\u002Fdoc\u002FMoveable.html#methods) are supported. \nJust use reference to call them. \n\nE.g. `this.$refs.\u003Cmoveable_ref>.\u003Cmoveable_method>`.\n\nHere is an example:\n```vue\n\u003Ctemplate>\n  \u003CMoveable\n    ref=\"moveable\"\n    class=\"moveable\"\n  >\n    \u003Cspan>Vue Moveable\u003C\u002Fspan>\n  \u003C\u002FMoveable>\n\u003C\u002Ftemplate>\n\u003Cscript>\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   \u002F\u002F -> 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   \u002F\u002F -> isMoveableElement: false\n\n  },\n}\n\u003C\u002Fscript>\n```\nDemo: https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fvue-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:\u002F\u002Fgithub.com\u002Fvuejs\u002Fvue-cli\u002Ftree\u002Fdev\u002Fpackages\u002F%40vue\u002Fbabel-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:\u002F\u002Fpolyfill.io\u002Fv3\u002F\n\n\n## ⚙️ Developments\n### `npm run serve`\n\nRuns the app in the development mode.\u003Cbr>\nOpen [http:\u002F\u002Flocalhost:8080](http:\u002F\u002Flocalhost:8080) to view it in the browser.\n\nThe page will reload if you make edits.\u003Cbr>\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:\u002F\u002Fgithub.com\u002Fprobil\u002Fvue-moveable\u002Fissues) 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:\u002F\u002Fgithub.com\u002Fprobil\u002Fvue-moveable\u002Fissues) on GitHub.\n\n\n## 📝 License\n\nThis project is [MIT](https:\u002F\u002Fgithub.com\u002Fprobil\u002Fvue-moveable\u002Fblob\u002Fmaster\u002FLICENSE) licensed.\n","Vue Moveable 是一个基于 Vue.js 的可移动组件库，支持拖拽、调整大小、缩放、旋转等功能。它提供了丰富的交互特性，如可拖动（Draggable）、可调整大小（Resizable）、可缩放（Scalable）和可旋转（Rotatable），并且还支持变形（Warpable）、捏合（Pinchable）、分组（Groupable）和对齐（Snappable）。该库适用于需要在网页上实现复杂用户界面交互的场景，比如图形编辑器、布局工具或任何需要元素动态操作的应用程序。其简洁的 API 和强大的功能使得开发者能够快速集成这些交互功能到 Vue 项目中。","2026-06-11 03:20:58","top_language"]