Draggable,resizable and rotatable component for vue.


npm i yoyoo-ddr --save


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

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:red" />


  • Lightweight and no dependencies
  • Draggable, resizable, rotatable, configurable
  • Define handles for resizing
  • Support aspect ratio


This component cannot be used normally in the following scenarios



name type default desc
draggable boolean true Whether the component can be dragged
rotatable boolean true Whether the component can be rotated
resizable boolean true Whether the component can be resized
active boolean true Whether the component is selected, it can only be operated after it is selected
acceptRatio boolean false Set to true or hold down the shift key, it will scale proportionally
resizeHandler Array ['tl','tm','tr','r','br','bm','l','bl'] Set the direction that can be resized
minWidth number 1 Minimum width
minHeight number 1 Minimum height
value Object {x:0,y:0,width:100,height:100,rotation:0} Controls the position, size, and rotation of components


The parameter event is the component's native event object

The parameter transform is the position and rotation angle of the component

name args
dragStart (event,transform)=>{} :void 0
drag (event,transform)=>{} :void 0
dragEnd (event,transform)=>{} :void 0
rotateStart (event,transform)=>{} :void 0
rotate (event,transform)=>{} :void 0
rotateEnd (event,transform)=>{} :void 0
resizeStart (event,transform)=>{} :void 0
resize (event,transform)=>{} :void 0
resizeEnd (event,transform)=>{} :void 0