# vue-moveable **Repository Path**: browsers/vue-moveable ## Basic Information - **Project Name**: vue-moveable - **Description**: 镜像 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-10-28 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

Vue Moveable

npm version github stars license Minified library size React Preact Angular Vue

A Vue Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable.

Edit Vue Moveable Demo

Moveable
Draggable Resizable Scalable Rotatable
Warpable Pinchable Groupable Snappable
Clippable Roundable OriginDraggable Selecto
## 🔥 Features * **Draggable** refers to the ability to drag and move targets. * **Resizable** indicates whether the target's width and height can be increased or decreased. * **Scalable** indicates whether the target's x and y can be scale of transform. * **Rotatable** indicates whether the target can be rotated. * **Warpable** indicates whether the target can be warped (distorted, bented). * **Pinchable** indicates whether the target can be pinched with draggable, resizable, scalable, rotatable. * **Groupable** indicates Whether the targets can be moved in group with draggable, resizable, scalable, rotatable. * **Snappable** indicates whether to snap to the guideline. * **OriginDraggable*** indicates Whether to drag origin. * **Clippable** indicates Whether to clip the target. * **Roundable** indicates Whether to show and drag or double click border-radius. * Support SVG Elements (svg, path, line, ellipse, g, rect, ...etc) * Support Major Browsers * Support 3d Transform ## ⚙️ Installation ```sh $ npm i vue-moveable ``` ## 📄 Documents * [**Moveable Handbook**](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md) * [**How to use Group**](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md#toc-group) * [**How to use custom CSS**](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md#toc-custom-css) * [API Documentation](https://daybrush.com/moveable/release/latest/doc/) ## 🚀 How to use ```vue ``` ### Calling moveable methods All [moveable instance methods](https://daybrush.com/moveable/release/latest/doc/Moveable.html#methods) are supported. Just use reference to call them. E.g. `this.$refs..`. Here is an example: ```vue ``` Demo: https://codesandbox.io/s/vue-moveable-issue-84-xzblq ## Polyfills Library 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. [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): ``` # for core-js@2 es6.array.filter es6.object.keys es6.symbol # optional # for core-js@3 es.array.filter es.object.keys es.symbol # optional ``` For direct usage in browser consider using https://polyfill.io/v3/ ## ⚙️ Developments ### `npm run serve` Runs the app in the development mode.
Open [http://localhost:8080](http://localhost:8080) to view it in the browser. The page will reload if you make edits.
You will also see any lint errors in the console. ## ⭐️ Show Your Support Please give a ⭐️ if this project helped you! ## 👏 Contributing If 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. ## 🐞 Bug Report If you find a bug, please report to us opening a new [Issue](https://github.com/probil/vue-moveable/issues) on GitHub. ## 📝 License This project is [MIT](https://github.com/probil/vue-moveable/blob/master/LICENSE) licensed.