yoyoo-ddr-vue3

v1.0.4

Published

2 years ago

Lightweight and no dependencies,use draggable, resizable, rotatable, configurable for vue 3 component

Downloads

250

0High
0Medium
0Low

yaojun

draggable resizable rotatable vue3

Install

npm i yoyoo-ddr --save

Usage

Two-way data binding(v-model)

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 v-model={this.transform}>
        <div style="background:red;width:100%;height:100%">x={this.transform.x}</div>
      </DDR>
    )
  },
}

Use arrays to render multiple components

export default {
  data() {
    return {
      list: [
        { id: 1, active: false, transform: { x: 100, y: 100, width: 100, height: 100, rotation: 0 } },
        { id: 2, active: false, transform: { x: 200, y: 100, width: 100, height: 100, rotation: 0 } },
        { id: 3, active: false, transform: { x: 300, y: 100, width: 100, height: 100, rotation: 0 } },
        { id: 4, active: false, transform: { x: 400, y: 100, width: 100, height: 100, rotation: 0 } },
      ],
    }
  },
  methods: {
    // If the `active` property of the component and the return value of the beforeActive function are both false,
    // the component will not respond to mouse operations
    handleActive(id) {
      //  Synchronize the array once when the component is selected
      this.list = this.list.map((item) => {
        if (item.id === id) {
          // Set the currently selected active to true in the array
          item = { ...item, active: true }
        } else if (item.active) {
          // Normally, only one component of the array rendering is active, so here the last selected component is set to the false state
          item = { ...item, active: false }
        }
        return item
      })
      return true
    },
    // Use the renderContent function instead of slot to ensure that only the modified data is updated when updating `list`.
    renderChild(item) {
      return <div style="background:red;width:100%;height:100%">Child {item.id}</div>
    },
  },
  render() {
    return (
      <div>
        {this.list.map((item) => {
          // If you use slot here, all components will be re-rendered when a new value is set for list. practice shows that performance problems occur when more than 200 components are used, while up to 2000 can be used with renderContent.

          // If you want to customize other properties for the component, you need to wrap the component once. You can refer to examples/vseditor/cell-wrapper.vue in the demo project.
          return (
            <DDR
              beforeActive={this.handleActive}
              active={item.active}
              key={item.id}
              id={item.id}
              value={item.transform}
              renderContent={this.renderChild}
            />
          )
        })}
      </div>
    )
  },
}

`value` One-way data binding

export default {
  data() {
    return {
      transform: { x: 100, y: 100, width: 100, height: 100, rotation: 0 },
    }
  },
  methods: {
    handleDrag(event, transform) {
      this.transform = transform
    },
    handleResize(event, transform) {
      this.transform = transform
    },
    handleRotate(event, transform) {
      this.transform = transform
    },
  },
  render() {
    // When the component is dragged, the `transform` of the parent component will not be updated
    // You need to listen to the event to synchronize the transform
    // This example is only the synchronization of a single component. If you use array rendering, it is recommended to use dragend, rotatend, and resizend events to synchronize to avoid performance problems caused by the update frequency too fast
    return (
      <DDR onResize={this.handleResize} onRotate={this.handleRotate} onDrag={this.handleDrag} value={this.transform}>
        <div style="background:red;width:100%;height:100%">child</div>
      </DDR>
    )
  },
}

Features

Lightweight, no third-party dependencies
Configurable drag, rotation, resize, snap to grid , limit movement within the parent element, fixed coordinate axis movement, etc.

Possible problems

If the container uses transform:scale(2), the position of the component will be wrong
Based on vue 2 , does not support vue3
If the container uses overflow:scroll, it will also cause the component to be in the wrong position when dragging.

Props

value(v-model)

Type: Object Defaults: {x:0,y:0,width:100,height:100,rotation:0} Required: true

One-way data flow. The position, rotation angle, size of the component. make sure the parent container is set to position=relative|absolute|fixed

x: Left of parent side,will add left={x}px to Dom
y: Top of parent side,will add top={y}pxto Dom
width: Width of the component,will add width={x}pxto Dom
height: Height of the component, will add height={x}px to Dom
rotation: Rotation of the component, will add transform=rotation({rotation}deg) to Dom

Example:

<DDR value={{ x: 100, y: 100, width: 100, height: 100, rotation: 45 }} />