Skip to content
↔️ ↕️ πŸ”„ Vue.js port of Moveable
Vue HTML Shell JavaScript
Branch: master
Clone or download
Max Lyashuk
Max Lyashuk build: release 0.3.1
Latest commit 6651fcf Aug 24, 2019

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.

Edit Vue Moveable Demo

Draggable Resizable Scalable Rotatable
Warpable Pinchable

πŸ”₯ Able!

  • 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.
  • Support SVG Elements (svg, path, line, ellipse, g, rect, ...etc)
  • Support 3d Transform

βš™οΈ Installation

$ npm i vue-moveable

πŸ“„ Documents

πŸš€ How to use

    <span>Vue Moveable</span>
import Moveable from 'vue-moveable';

export default {
  name: 'app',
  components: {
  data: () => ({
    moveable: {
      draggable: true,
      throttleDrag: 0,
      resizable: false,
      throttleResize: 1,
      keepRatio: true,
      scalable: true,
      throttleScale: 0,
      rotatable: true,
      throttleRotate: 0,
      pinchable: true, // ["draggable", "resizable", "scalable", "rotatable"]
  methods: {
    handleDrag({ target, left, top }) {
      console.log('onDrag left, top', left, top); = `${left}px`; = `${top}px`;
      target, width, height, delta,
    }) {
      console.log('onResize', width, height);
      delta[0] && ( = `${width}px`);
      delta[1] && ( = `${height}px`);
    handleScale({ target, transform, scale }) {
      console.log('onScale scale', scale); = transform;
    handleRotate({ target, dist, transform }) {
      console.log('onRotate', dist); = transform;
    handleWarp({ target, transform }) {
      console.log('onWarp', target); = transform;
    handlePinch({ target }) {
      console.log('onPinch', target);

βš™οΈ Developments

npm run serve

Runs the app in the development mode.
Open 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 or give me a Pull Request freely.

🐞 Bug Report

If you find a bug, please report to us opening a new Issue on GitHub.

πŸ“ License

This project is MIT licensed.

You can’t perform that action at this time.