Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/probil/vue-moveable

↔️ ↕️ 🔄 Vue.js wrapper for Moveable
https://github.com/probil/vue-moveable

draggable moveable resizable rotatable scalable vue vue-moveable warpable

Last synced: about 2 months ago
JSON representation

↔️ ↕️ 🔄 Vue.js wrapper for Moveable

Host: GitHub
URL: https://github.com/probil/vue-moveable
Owner: probil
License: mit
Archived: true
Created: 2019-07-28T23:08:10.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2021-11-09T12:52:30.000Z (about 3 years ago)
Last Synced: 2024-08-02T14:13:00.619Z (5 months ago)
Topics: draggable, moveable, resizable, rotatable, scalable, vue, vue-moveable, warpable
Language: Vue
Homepage: https://vue-moveable.netlify.com/
Size: 5.3 MB
Stars: 966
Watchers: 9
Forks: 69
Open Issues: 46
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

awesome-starred-test - probil/vue-moveable - ↔️ ↕️ 🔄 Vue.js wrapper for Moveable (Vue)
awesome-github-repos - probil/vue-moveable - ↔️ ↕️ 🔄 Vue.js wrapper for Moveable (Vue)

README

        **This project is superseded by the official Moveable Vue plugin:**

* https://github.com/daybrush/moveable/tree/master/packages/vue-moveable

* https://github.com/daybrush/moveable/tree/master/packages/vue3-moveable



Vue Moveable



    

      

    

      

    

      

    

    

    

    

    

    

    

    



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



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

  

    Vue Moveable

  

import Moveable from 'vue-moveable';

export default {

  name: 'app',

  components: {

    Moveable,

  },

  data: () => ({

    moveable: {

      draggable: true,

      throttleDrag: 0,

      resizable: false,

      throttleResize: 1,

      keepRatio: false,

      scalable: true,

      throttleScale: 0,

      rotatable: true,

      throttleRotate: 0,

      pinchable: true, // ["draggable", "resizable", "scalable", "rotatable"]

      origin: false,

    }

  }),

  methods: {

    handleDrag({ target, transform }) {

      console.log('onDrag left, top', transform);

      target.style.transform = transform;

    },

    handleResize({

      target, width, height, delta,

    }) {

      console.log('onResize', width, height);

      delta[0] && (target.style.width = `${width}px`);

      delta[1] && (target.style.height = `${height}px`);

    },

    handleScale({ target, transform, scale }) {

      console.log('onScale scale', scale);

      target.style.transform = transform;

    },

    handleRotate({ target, dist, transform }) {

      console.log('onRotate', dist);

      target.style.transform = transform;

    },

    handleWarp({ target, transform }) {

      console.log('onWarp', transform);

      target.style.transform = transform;

    },

    handlePinch({ target }) {

      console.log('onPinch', target);

    },

  }

}

```

### 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

  

    Vue Moveable

  

import Moveable from 'vue-moveable';

export default {

  name: 'app',

  components: {

    Moveable,

  },

  mounted() {

   console.log("getRect: ", this.$refs.moveable.getRect()); 

   // -> getRect: Object {width: 300, height: 200, left: 127, top: 120.5, pos1: Array[2]…}

   console.log("isMoveableElement: ", this.$refs.moveable.isMoveableElement(document.body));

   // -> isMoveableElement: false

  },

}

```

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.