yoyoo-ddr

Draggable,resizable and rotatable component for vue.

View Demo View application View Github

Installation

npm i yoyoo-ddr --save

Usage


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" />
      </DDR>
    )
  },
}

Features

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

Tips

This component cannot be used normally in the following scenarios

transform:scale(2)

Props

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

Events

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