\r\n\r\n[](https://npmjs.com/package/vue-draggable-resizable)\r\n[](LICENSE.md)\r\n[](https://www.npmjs.com/package/vue-draggable-resizable)\r\n\r\n> Vue2 Component for draggable and resizable elements.\r\n\r\nIf you are looking for the version 1 of the component, it is available on the [v1 branch](https://github.com/mauricius/vue-draggable-resizable/tree/v1).\r\n\r\n## Table of Contents\r\n\r\n* [Features](#features)\r\n* [Live Playground](#live-playground)\r\n* [Install and basic usage](#install-and-basic-usage)\r\n * [Props](#props)\r\n * [Events](#events)\r\n * [Styling](#styling)\r\n* [Contributing](#contributing)\r\n* [License](#license)\r\n\r\n### Features\r\n\r\n* No dependencies\r\n* Use draggable, resizable or both\r\n* Define handles for resizing\r\n* Restrict size and movement to parent element or custom selector\r\n* Snap element to custom grid\r\n* Restrict drag to vertical or horizontal axis\r\n* Maintain aspect ratio\r\n* Touch enabled\r\n* Use your own classes\r\n* Provide your own markup for handles\r\n\r\n### Live Playground\r\n\r\nFor examples of the component go to the [live playground](https://mauricius.github.io/vue-draggable-resizable/)\r\n\r\nAlternatively you can run the playground on your own computer:\r\n\r\n* Clone this repository\r\n* `npm install`\r\n* `npm run storybook`\r\n* Visit [http://localhost:9001/](http://localhost:9001/)\r\n\r\n---\r\n\r\n## Install and basic usage\r\n\r\n```bash\r\n$ npm install --save vue-draggable-resizable\r\n```\r\n\r\n\r\nRegister the component\r\n\r\n```js\r\nimport Vue from 'vue'\r\nimport VueDraggableResizable from 'vue-draggable-resizable'\r\n\r\n// optionally import default styles\r\nimport 'vue-draggable-resizable/dist/VueDraggableResizable.css'\r\n\r\nVue.component('vue-draggable-resizable', VueDraggableResizable)\r\n```\r\n\r\nYou may now use the component in your markup\r\n\r\n```vue\r\n\r\n
\r\n \r\n
Hello! I'm a flexible component. You can drag me around and you can resize me. \r\n X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}
\r\n \r\n
\r\n\r\n\r\n\r\n```\r\n\r\n### Props\r\n\r\n#### className\r\nType: `String` \r\nRequired: `false` \r\nDefault: `vdr`\r\n\r\nUsed to set the custom `class` of a draggable-resizable component.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### classNameDraggable\r\nType: `String` \r\nRequired: `false` \r\nDefault: `draggable`\r\n\r\nUsed to set the custom `class` of a draggable-resizable component when `draggable` is enable.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### classNameResizable\r\nType: `String` \r\nRequired: `false` \r\nDefault: `resizable`\r\n\r\nUsed to set the custom `class` of a draggable-resizable component when `resizable` is enable.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### classNameDragging\r\nType: `String` \r\nRequired: `false` \r\nDefault: `dragging`\r\n\r\nUsed to set the custom `class` of a draggable-resizable component when is dragging.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### classNameResizing\r\nType: `String` \r\nRequired: `false` \r\nDefault: `resizing`\r\n\r\nUsed to set the custom `class` of a draggable-resizable component when is resizing.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### classNameActive\r\nType: `String` \r\nRequired: `false` \r\nDefault: `active`\r\n\r\nUsed to set the custom `class` of a draggable-resizable component when is active.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### classNameHandle\r\nType: `String` \r\nRequired: `false` \r\nDefault: `handle`\r\n\r\nUsed to set the custom common `class` of each handle element. This way you can style each handle individually using the selector `-`, where `handle code` identifies one of the handles provided by the `handle` prop.\r\n\r\nSo for example, this component:\r\n\r\n```html\r\n\r\n```\r\n\r\nrenders the following:\r\n\r\n```html\r\n
\r\n \r\n \r\n \r\n [...]\r\n
\r\n```\r\n\r\n#### disableUserSelect\r\nType: `Boolean` \r\nRequired: `false` \r\nDefault: `true`\r\n\r\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`.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### enableNativeDrag\r\nType: `Boolean` \r\nRequired: `false` \r\nDefault: `false`\r\n\r\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`.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### active\r\nType: `Boolean` \r\nRequired: `false` \r\nDefault: `false`\r\n\r\nDetermines if the component should be active or not. The prop reacts to changes and also can be used with the `sync`[modifier](https://vuejs.org/v2/guide/components.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.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### preventDeactivation\r\nType: `Boolean` \r\nRequired: `false` \r\nDefault: `false`\r\n\r\nDetermines if the component should be deactivated when the user clicks/taps outside it.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### draggable\r\nType: `Boolean` \r\nRequired: `false` \r\nDefault: `true`\r\n\r\nDefines it the component should be draggable or not.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### resizable\r\nType: `Boolean` \r\nRequired: `false` \r\nDefault: `true`\r\n\r\nDefines it the component should be resizable or not.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### w\r\nType: `Number` \r\nRequired: `false` \r\nDefault: `200`\r\n\r\nDefine the initial width of the element.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### h\r\nType: `Number` \r\nRequired: `false` \r\nDefault: `200`\r\n\r\nDefine the initial height of the element.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### minWidth\r\nType: `Number` \r\nRequired: `false` \r\nDefault: `50`\r\n\r\nDefine the minimal width of the element.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### minHeight\r\nType: `Number` \r\nRequired: `false` \r\nDefault: `50`\r\n\r\nDefine the minimal height of the element.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### maxWidth\r\nType: `Number` \r\nRequired: `false` \r\nDefault: `null`\r\n\r\nDefine the maximum width of the element.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### maxHeight\r\nType: `Number` \r\nRequired: `false` \r\nDefault: `null`\r\n\r\nDefine the maximum height of the element.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### x\r\nType: `Number` \r\nRequired: `false` \r\nDefault: `0`\r\n\r\nDefine the initial x position of the element.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### y\r\nType: `Number` \r\nRequired: `false` \r\nDefault: `0`\r\n\r\nDefine the initial y position of the element.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### z\r\nType: `Number|String` \r\nRequired: `false` \r\nDefault: `auto`\r\n\r\nDefine the zIndex of the element.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### handles\r\nType: `Array` \r\nRequired: `false` \r\nDefault: `['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']`\r\n\r\nDefine the array of handles to restrict the element resizing:\r\n* `tl` - Top left\r\n* `tm` - Top middle\r\n* `tr` - Top right\r\n* `mr` - Middle right\r\n* `br` - Bottom right\r\n* `bm` - Bottom middle\r\n* `bl` - Bottom left\r\n* `ml` - Middle left\r\n\r\n```html\r\n\r\n```\r\n\r\n#### axis\r\nType: `String` \r\nRequired: `false` \r\nDefault: `both`\r\n\r\nDefine the axis on which the element is draggable. Available values are `x`, `y` or `both`.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### grid\r\nType: `Array` \r\nRequired: `false` \r\nDefault: `[1,1]`\r\n\r\nDefine the grid on which the element is snapped.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### parent\r\nType: `Boolean | String` \r\nRequired: `false` \r\nDefault: `false`\r\n\r\nRestricts the movement and the dimensions of the component to the parent (if `true` is provided), or to an element identified by a valid CSS selector.\r\n\r\n```html\r\n\r\n```\r\n\r\n```html\r\n\r\n```\r\n\r\n#### dragHandle\r\nType: `String` \r\nRequired: `false`\r\n\r\nDefines the selector that should be used to drag the component.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### dragCancel\r\nType: `String` \r\nRequired: `false`\r\n\r\nDefines a selector that should be used to prevent drag initialization.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### lockAspectRatio\r\nType: `Boolean` \r\nRequired: `false` \r\nDefault: `false`\r\n\r\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.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### onDragStart\r\nType: `Function` \r\nRequired: `false` \r\nDefault: `null`\r\n\r\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.\r\n\r\n```html\r\n\r\n```\r\n\r\n```js\r\nfunction onDragStartCallback(ev){\r\n ...\r\n // return false; — for cancel\r\n}\r\n```\r\n\r\n\r\n#### onResizeStart\r\nType: `Function` \r\nRequired: `false` \r\nDefault: `null`\r\n\r\nCalled when resizing starts (handle is clicked or touched). If `false` is returned by any handler, the action will cancel.\r\n\r\n```html\r\n\r\n```\r\n\r\n```js\r\n\r\nfunction onResizeStartCallback(handle, ev){\r\n ...\r\n // return false; — for cancel\r\n}\r\n```\r\n---\r\n\r\n### Events\r\n\r\n#### activated\r\n\r\nParameters: `-`\r\n\r\nCalled whenever the component gets clicked, in order to show handles.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### deactivated\r\n\r\nParameters: `-`\r\n\r\nCalled whenever the user clicks anywhere outside the component, in order to deactivate it.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### resizing\r\n\r\nParameters:\r\n* `left` the X position of the element\r\n* `top` the Y position of the element\r\n* `width` the width of the element\r\n* `height` the height of the element\r\n\r\nCalled whenever the component gets resized.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### resizestop\r\n\r\nParameters:\r\n* `left` the X position of the element\r\n* `top` the Y position of the element\r\n* `width` the width of the element\r\n* `height` the height of the element\r\n\r\nCalled whenever the component stops getting resized.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### dragging\r\n\r\nParameters:\r\n* `left` the X position of the element\r\n* `top` the Y position of the element\r\n\r\nCalled whenever the component gets dragged.\r\n\r\n```html\r\n\r\n```\r\n\r\n#### dragstop\r\n\r\nParameters:\r\n* `left` the X position of the element\r\n* `top` the Y position of the element\r\n\r\nCalled whenever the component stops getting dragged.\r\n\r\n```html\r\n\r\n```\r\n\r\n---\r\n\r\n### Styling\r\n\r\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.\r\n\r\nThe component also provides [named slots](https://vuejs.org/v2/guide/components-slots.html#Named-Slots) for each handle, so you can use your markup inside each one.\r\n\r\n## Thanks\r\n\r\nThanks to @kirillmurashov for his work on [vue-drag-resize](https://github.com/kirillmurashov/vue-drag-resize) component.\r\n\r\n## Security\r\n\r\nIf you discover any security related issues, please email maurizio.bonani@gmail.com instead of using the issue tracker.\r\n\r\n## Contributing\r\n\r\nAny contribution to the code or any part of the documentation and any idea and/or suggestion are very welcome.\r\n\r\n``` bash\r\n# serve with hot reload at localhost:8080\r\nnpm run serve\r\n\r\n# distribution build\r\nnpm run build\r\n\r\n# build the storybook docs into gh-pages\r\nnpm run gh-pages:build\r\n\r\n# run unit tests\r\nnpm run unit\r\n\r\n# run storybook at localhost:9001\r\nnpm run storybook\r\n```\r\n\r\n## License\r\n\r\nThe MIT License (MIT). Please see [License File](LICENSE) for more information.\r\n","readmeFilename":"README.md"}
![\"logo\"](\"https://rawgit.com/mauricius/vue-draggable-resizable/v1/docs/resources/logo.png\"){kind=logo}