Draggable Resizable Rotatable Component For Vue – yoyoo-ddr

A touch-enabled draggable, resizable, and rotatable component for Vue.js applications.

How to use it:

1. Import the yoyoo-ddr.

import DDR from 'yoyoo-ddr'
import 'yoyoo-ddr/dist/yoyoo-ddr.css'

2. Create a draggable, resizable, and rotatable component.

export default {
  data() {
    return {
      transform: { x: 100, y: 100, width: 100, height: 100, rotation: 0 },
    }
  },
  render() {
    return (
      <DDR value={this.transform}>
        <div style="width:100%;height:100%;background:black" />
      </DDR>
    )
  },
}

3. Possible props.

value: {
  default: function() {
    return { x: 0, y: 0, width: 100, height: 100, rotation: 0 }
  },
  type: Object,
},
handlerSize: {
  type: Number,
  default: 11,
},
active: {
  default: true,
  type: Boolean,
},
resizeHandler: {
  default: function() {
    return ['tl', 'tm', 'tr', 'r', 'br', 'bm', 'bl', 'l']
  },
  type: Array,
},
resizable: {
  default: true,
  type: Boolean,
},
rotatable: {
  default: true,
  type: Boolean,
},
draggable: {
  default: true,
  type: Boolean,
},
acceptRatio: {
  default: false,
  type: Boolean,
},
minWidth: {
  type: Number,
  default: 1,
},
minHeight: {
  type: Number,
  default: 1,
},
maxWidth: {
  type: Number,
  default: 100000000,
},
maxHeight: {
  type: Number,
  default: 100000000,
},
parent: {
  type: Boolean,
  default: false,
},
beforeActive: {
  type: Function,
  default: () => false,
},
id: [Number, String],
renderContent: Function,
grid: {
  type: Array,
  default: () => [1, 1],
},
axis: {
  type: String,
  default: 'xy', // x | y
},

Preview:

Changelog:

v0.7.0 (03/13/2023)

• bugfix

v0.6.1 (06/04/2022)

• bugfix

v0.5.5 (11/10/2021)

• added maxHeight and maxWidth props
• set the handlerSize’s initial value to 11

v0.5.4 (11/10/2021)

• added v-model to value prop.

v0.5.3 (11/03/2021)

• Bugfix

v0.4.0 (09/27/2021)

• Performance update

Download Details:

Author: zuimeiaj

Live Demo: https://zuimeiaj.github.io/ddr/

Download Link: https://github.com/zuimeiaj/yoyoo-ddr/archive/refs/heads/master.zip

Official Website: https://github.com/zuimeiaj/yoyoo-ddr

Install & Download:

# Yarn
$ yarn add yoyoo-ddr-vue3

# NPM
$ npm i yoyoo-ddr-vue3