Draggable Resizable Rotatable Component For Vue - yoyoo-ddr

Install & Download:

# Yarn
$ yarn add yoyoo-ddr-vue3
# NPM
$ npm i yoyoo-ddr-vue3

Description:

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
},