[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8708":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":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":23,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":29,"readmeContent":30,"aiSummary":31,"trendingCount":16,"starSnapshotCount":16,"syncStatus":32,"lastSyncTime":33,"discoverSource":34},8708,"vue-draggable-resizable","mauricius\u002Fvue-draggable-resizable","mauricius","Vue3 Component for draggable and resizable elements.","https:\u002F\u002Fmauricius.github.io\u002Fvue-draggable-resizable\u002F",null,"Vue",3587,571,43,117,0,1,3,61.07,"MIT License",false,"main",true,[25,26,27,28],"component","draggable","resizable","vuejs3","2026-06-12 04:00:41","\u003Cp align=\"center\">\u003Cimg src=\"https:\u002F\u002Frawgit.com\u002Fmauricius\u002Fvue-draggable-resizable\u002Fv1\u002Fdocs\u002Fresources\u002Flogo.png\" alt=\"logo\">\u003C\u002Fp>\n\u003Ch1 align=\"center\">VueDraggableResizable 3\u003C\u002Fh1>\n\n[![Latest Version on NPM](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fvue-draggable-resizable.svg?style=flat-square)](https:\u002F\u002Fnpmjs.com\u002Fpackage\u002Fvue-draggable-resizable)\n[![Software License](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-brightgreen.svg?style=flat-square)](LICENSE.md)\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002Fvue-draggable-resizable.svg?style=flat-square)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fvue-draggable-resizable)\n\n> Vue Component for draggable and resizable elements.\n\nIf you are looking for the version 1 of the component, it is available on the [v1 branch](https:\u002F\u002Fgithub.com\u002Fmauricius\u002Fvue-draggable-resizable\u002Ftree\u002Fv1).\n\n## Table of Contents\n\n* [Features](#features)\n* [Live Playground](#live-playground)\n* [Install and basic usage](#install-and-basic-usage)\n  * [Props](#props)\n  * [Events](#events)\n  * [Styling](#styling)\n* [Contributing](#contributing)\n* [License](#license)\n\n### Features\n\n* No dependencies\n* Use draggable, resizable or both\n* Define handles for resizing\n* Restrict size and movement to parent element\n* Snap element to custom grid\n* Restrict drag to vertical or horizontal axis\n* Maintain aspect ratio\n* Touch enabled\n* Use your own classes\n* Provide your own markup for handles\n\n### Live Playground\n\nFor examples of the component go to the [live playground](https:\u002F\u002Fmauricius.github.io\u002Fvue-draggable-resizable\u002F)\n\nAlternatively you can run the playground on your own computer:\n\n* Clone this repository\n* `npm install`\n* `npm run story:dev`\n* Visit [http:\u002F\u002Flocalhost:6006\u002F](http:\u002F\u002Flocalhost:6006\u002F)\n\n---\n\n## Install and basic usage\n\n```bash\n$ npm install --save vue-draggable-resizable\n```\n\n\nRegister the component globally\n\n```js\n\u002F\u002F main.js\nimport { createApp } from 'vue'\nimport VueDraggableResizable from 'vue-draggable-resizable'\nimport App from '.\u002FApp.vue'\n\ncreateApp(App)\n  .component(\"vue-draggable-resizable\", VueDraggableResizable)\n  .mount('#app')\n```\n\nYou may now use the component in your markup\n\n```vue\n\u002F\u002F App.vue\n\u003Ctemplate>\n  \u003Cdiv style=\"height: 500px; width: 500px; border: 1px solid red; position: relative;\">\n    \u003Cvue-draggable-resizable :w=\"100\" :h=\"100\" :parent=\"true\">\n      \u003Cp>Hello! I'm a flexible component. You can drag me around and you can resize me.\u003C\u002Fp>\n    \u003C\u002Fvue-draggable-resizable>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\nThe component itself does not include any CSS. You'll need to include it separately in your `App.vue`:\n\n```vue\n\u003Cstyle>\n@import \"vue-draggable-resizable\u002Fstyle.css\";\n\u003C\u002Fstyle>\n```\n\n### Props\n\n#### className\nType: `String`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `vdr`\n\nUsed to set the custom `class` of a draggable-resizable component.\n\n```html\n\u003Cvue-draggable-resizable class-name=\"my-class\">\n```\n\n#### classNameDraggable\nType: `String`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `draggable`\n\nUsed to set the custom `class` of a draggable-resizable component when `draggable` is enable.\n\n```html\n\u003Cvue-draggable-resizable class-name-draggable=\"my-draggable-class\">\n```\n\n#### classNameResizable\nType: `String`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `resizable`\n\nUsed to set the custom `class` of a draggable-resizable component when `resizable` is enable.\n\n```html\n\u003Cvue-draggable-resizable class-name-resizable=\"my-resizable-class\">\n```\n\n#### classNameDragging\nType: `String`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `dragging`\n\nUsed to set the custom `class` of a draggable-resizable component when is dragging.\n\n```html\n\u003Cvue-draggable-resizable class-name-dragging=\"my-dragging-class\">\n```\n\n#### classNameResizing\nType: `String`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `resizing`\n\nUsed to set the custom `class` of a draggable-resizable component when is resizing.\n\n```html\n\u003Cvue-draggable-resizable class-name-resizing=\"my-resizing-class\">\n```\n\n#### classNameActive\nType: `String`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `active`\n\nUsed to set the custom `class` of a draggable-resizable component when is active.\n\n```html\n\u003Cvue-draggable-resizable class-name-active=\"my-active-class\">\n```\n\n#### classNameHandle\nType: `String`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `handle`\n\nUsed to set the custom common `class` of each handle element. This way you can style each handle individually using the selector `\u003Cyour class>-\u003Chandle code>`, where `handle code` identifies one of the handles provided by the `handle` prop.\n\nSo for example, this component:\n\n```html\n\u003Cvue-draggable-resizable class-name-handle=\"my-handle-class\">\u003C\u002Fvue-draggable-resizable>\n```\n\nrenders the following:\n\n```html\n\u003Cdiv ...>\n  \u003Cdiv class=\"my-handle-class my-handle-class-tl\">\u003C\u002Fdiv>\n  \u003Cdiv class=\"my-handle-class my-handle-class-tm\">\u003C\u002Fdiv>\n  \u003Cdiv class=\"my-handle-class my-handle-class-tr\">\u003C\u002Fdiv>\n  [...]\n\u003C\u002Fdiv>\n```\n\n#### scale\nType: `Number|Array`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `1`\n\nThe `scale` prop controls the scale property when the CSS 3 [scale transformation](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Ftransform-function\u002Fscale) is applied to one of the parent elements. If not provided the default value is 1.\n\n```html\n\u003Cvue-draggable-resizable :scale=\"0.5\">\n\n\u003Cvue-draggable-resizable :scale=\"[0.5, 0.4]\">\n```\n\n#### disableUserSelect\nType: `Boolean`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `true`\n\nBy default, the component adds the style declaration `'user-select:none'` to itself to prevent text selection during drag. You can disable this behaviour by setting this prop to `false`.\n\n```html\n\u003Cvue-draggable-resizable :disable-user-select=\"false\">\n```\n\n#### enableNativeDrag\nType: `Boolean`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `false`\n\nBy default, the browser's native drag and drop funcionality (usually used for images and some other elements) is disabled, as it may conflict with the one provided by the component. If you need, for whatever reason, to have this functionality back you can set this prop to `true`.\n\n```html\n\u003Cvue-draggable-resizable :enable-native-drag=\"true\">\n```\n\n#### active\nType: `Boolean`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `false`\n\nDetermines if the component should be active or not. The prop reacts to changes and also can be used with the `sync`[modifier](https:\u002F\u002Fvuejs.org\u002Fv2\u002Fguide\u002Fcomponents.html#sync-Modifier) to keep the state in sync with the parent. You can use along with the `preventDeactivation` prop in order to fully control the active behavior from outside the component.\n\n```html\n\u003Cvue-draggable-resizable :active=\"true\">\n```\n\n#### preventDeactivation\nType: `Boolean`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `false`\n\nDetermines if the component should be deactivated when the user clicks\u002Ftaps outside it.\n\n```html\n\u003Cvue-draggable-resizable :prevent-deactivation=\"true\">\n```\n\n#### draggable\nType: `Boolean`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `true`\n\nDefines it the component should be draggable or not.\n\n```html\n\u003Cvue-draggable-resizable :draggable=\"false\">\n```\n\n#### resizable\nType: `Boolean`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `true`\n\nDefines it the component should be resizable or not.\n\n```html\n\u003Cvue-draggable-resizable :resizable=\"false\">\n```\n\n#### w\nType: `Number|String`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `200`\n\nDefine the initial width of the element. It also supports `auto`, but when you start resizing the value will fallback to a number.\n\n```html\n\u003Cvue-draggable-resizable :w=\"200\">\n```\n\n#### h\nType: `Number|String`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `200`\n\nDefine the initial height of the element. It also supports `auto`, but when you start resizing the value will fallback to a number.\n\n```html\n\u003Cvue-draggable-resizable :h=\"200\">\n```\n\n#### minWidth\nType: `Number`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `50`\n\nDefine the minimal width of the element.\n\n```html\n\u003Cvue-draggable-resizable :min-width=\"50\">\n```\n\n#### minHeight\nType: `Number`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `50`\n\nDefine the minimal height of the element.\n\n```html\n\u003Cvue-draggable-resizable :min-height=\"50\">\n```\n\n#### maxWidth\nType: `Number`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `null`\n\nDefine the maximum width of the element.\n\n```html\n\u003Cvue-draggable-resizable :max-width=\"400\">\n```\n\n#### maxHeight\nType: `Number`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `null`\n\nDefine the maximum height of the element.\n\n```html\n\u003Cvue-draggable-resizable :max-height=\"50\">\n```\n\n#### x\nType: `Number`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `0`\n\nDefine the initial x position of the element.\n\n```html\n\u003Cvue-draggable-resizable :x=\"0\">\n```\n\n#### y\nType: `Number`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `0`\n\nDefine the initial y position of the element.\n\n```html\n\u003Cvue-draggable-resizable :y=\"0\">\n```\n\n#### z\nType: `Number|String`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `auto`\n\nDefine the z-index of the element.\n\n```html\n\u003Cvue-draggable-resizable :z=\"999\">\n```\n\n#### handles\nType: `Array`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']`\n\nDefine the array of handles to restrict the element resizing:\n* `tl` - Top left\n* `tm` - Top middle\n* `tr` - Top right\n* `mr` - Middle right\n* `br` - Bottom right\n* `bm` - Bottom middle\n* `bl` - Bottom left\n* `ml` - Middle left\n\n```html\n\u003Cvue-draggable-resizable :handles=\"['tm','bm','ml','mr']\">\n```\n\n#### axis\nType: `String`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `both`\n\nDefine the axis on which the element is draggable. Available values are `x`, `y` or `both`.\n\n```html\n\u003Cvue-draggable-resizable axis=\"x\">\n```\n\n#### grid\nType: `Array`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `[1,1]`\n\nDefine the grid on which the element is snapped.\n\n```html\n\u003Cvue-draggable-resizable :grid=\"[1,1]\">\n```\n\n#### parent\nType: `Boolean`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `false`\n\nRestricts the movement and the dimensions of the component to the parent.\n\n```html\n\u003Cvue-draggable-resizable :parent=\"true\">\n```\n\n#### dragHandle\nType: `String`\u003Cbr>\nRequired: `false`\n\nDefines the selector that should be used to drag the component.\n\n```html\n\u003Cvue-draggable-resizable drag-handle=\".drag\">\n```\n\n#### dragCancel\nType: `String`\u003Cbr>\nRequired: `false`\n\nDefines a selector that should be used to prevent drag initialization.\n\n```html\n\u003Cvue-draggable-resizable drag-cancel=\".drag\">\n```\n\n#### lockAspectRatio\nType: `Boolean`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `false`\n\nThe `lockAspectRatio` property is used to lock aspect ratio. This property doesn't play well with `grid`, so make sure to use only one at a time.\n\n```html\n\u003Cvue-draggable-resizable :lock-aspect-ratio=\"true\">\n```\n\n#### onDragStart\nType: `Function`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `null`\n\nCalled when dragging starts (element is clicked or touched). If `false` is returned by any handler, the action will cancel. You can use this function to prevent bubbling of events.\n\n```html\n\u003Cvue-draggable-resizable :onDragStart=\"onDragStartCallback\">\n```\n\n```js\nfunction onDragStartCallback(ev){\n   ...\n   \u002F\u002F return false; — for cancel\n}\n```\n\n#### onDrag\nType: `Function`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `null`\n\nCalled before the element is dragged. The function receives the next values of `x` and `y`. If `false` is returned by any handler, the action will cancel.\n\n```html\n\u003Cvue-draggable-resizable :onDrag=\"onDragCallback\">\n```\n\n```js\nfunction onDragStartCallback(x, y){\n   ...\n   \u002F\u002F return false; — for cancel\n}\n```\n\n\n#### onResizeStart\nType: `Function`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `null`\n\nCalled when resizing starts (handle is clicked or touched). If `false` is returned by any handler, the action will cancel.\n\n```html\n\u003Cvue-draggable-resizable :onResizeStart=\"onResizeStartCallback\">\n```\n\n```js\n\nfunction onResizeStartCallback(handle, ev){\n   ...\n   \u002F\u002F return false; — for cancel\n}\n```\n\n#### onResize\nType: `Function`\u003Cbr>\nRequired: `false`\u003Cbr>\nDefault: `null`\n\nCalled before the element is resized. The function receives the handle and the next values of `x`, `y`, `width` and `height`. If `false` is returned by any handler, the action will cancel.\n\n```html\n\u003Cvue-draggable-resizable :onResize=\"onResizeCallback\">\n```\n\n```js\n\nfunction onResizeStartCallback(handle, x, y, width, height){\n   ...\n   \u002F\u002F return false; — for cancel\n}\n```\n---\n\n### Events\n\n#### activated\n\nParameters: `-`\n\nCalled whenever the component gets clicked, in order to show handles.\n\n```html\n\u003Cvue-draggable-resizable @activated=\"onActivated\">\n```\n\n#### deactivated\n\nParameters: `-`\n\nCalled whenever the user clicks anywhere outside the component, in order to deactivate it.\n\n```html\n\u003Cvue-draggable-resizable @deactivated=\"onDeactivated\">\n```\n\n#### resizing\n\nParameters:\n* `left` the X position of the element\n* `top` the Y position of the element\n* `width` the width of the element\n* `height` the height of the element\n\nCalled whenever the component gets resized.\n\n```html\n\u003Cvue-draggable-resizable @resizing=\"onResizing\">\n```\n\n#### resizestop\n\nParameters:\n* `left` the X position of the element\n* `top` the Y position of the element\n* `width` the width of the element\n* `height` the height of the element\n\nCalled whenever the component stops getting resized.\n\n```html\n\u003Cvue-draggable-resizable @resizestop=\"onResizestop\">\n```\n\n#### dragging\n\nParameters:\n* `left` the X position of the element\n* `top` the Y position of the element\n\nCalled whenever the component gets dragged.\n\n```html\n\u003Cvue-draggable-resizable @dragging=\"onDragging\">\n```\n\n#### dragstop\n\nParameters:\n* `left` the X position of the element\n* `top` the Y position of the element\n\nCalled whenever the component stops getting dragged.\n\n```html\n\u003Cvue-draggable-resizable @dragstop=\"onDragstop\">\n```\n\n---\n\n### Styling\n\nYou can style the component using appropriate class names passed as props to the component. Moreover you can replace the default styles for the handles, provided in the source file `vue-draggable-resizable.css`, but you should take care to define position and size for them. The default classes for handles are `handle` and `handle-tl`, `handle-br` and so on.\n\nThe component also provides [named slots](https:\u002F\u002Fvuejs.org\u002Fguide\u002Fcomponents\u002Fslots.html#named-slots) for each handle, so you can use your markup inside each one.\n\n## Thanks\n\nThanks to @kirillmurashov for his work on [vue-drag-resize](https:\u002F\u002Fgithub.com\u002Fkirillmurashov\u002Fvue-drag-resize) component.\n\n## Security\n\nIf you discover any security related issues, please email maurizio.bonani@gmail.com instead of using the issue tracker.\n\n## Contributing\n\nAny contribution to the code or any part of the documentation and any idea and\u002For suggestion are very welcome.\n\n``` bash\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# distribution build\nnpm run build\n\n# build the histoire docs\nnpm run story:build\n\n# run tests\nnpm run test\n\n# run histoire at localhost:6006\nnpm run story:dev\n```\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE) for more information.\n","VueDraggableResizable 是一个用于 Vue3 的可拖拽和可调整大小的组件。其核心功能包括支持元素的拖拽与缩放，允许开发者自定义拖拽手柄、限制元素大小及移动范围、设置网格对齐、保持宽高比等，并且完全兼容触控设备。此外，该组件不依赖任何外部库，具有高度的灵活性和自定义能力，如自定义样式类名或拖拽手柄的 HTML 结构。适用于需要在网页应用中实现用户界面动态布局调整的各种场景，例如仪表盘设计、可视化编辑器等。",2,"2026-06-11 03:19:24","top_language"]