yoyoo-ddr-vue3-ts

Draggable, rotatable and resizable components

⚠️ 该库已不再维护，请使用新的 scoped 包：

包	npm
核心引擎
Vue 3
React

npm i @yoyoo-ddr/core --save    # 核心（原生 JS / Angular / 任意框架）
npm i @yoyoo-ddr/vue --save     # Vue 3
npm i @yoyoo-ddr/react --save   # React

旧版安装（已废弃）

安装-vue 2

npm i yoyoo-ddr-vue2 --save

安装-vue 3

npm i yoyoo-ddr-vue3-ts --save

• 注意：使用 ts 和 vue3.x 重构，之前的 yoyoo-ddr-vue3 是根据 vue2 的语法做了些兼容，不再维护了

安装-react

npm i yoyoo-ddr-react --save

使用

Example

import DDR from 'yoyoo-ddr-vue3-ts'
import 'yoyoo-ddr-vue3-ts/dist/style.css'
import { defineComponent, ref } from 'vue'
import { TransformProps } from './yoyoo-ddr-vue3-ts/dist/type'

export default defineComponent({
  setup() {
    const t = ref<TransformProps>({ x: 100, y: 100, width: 100, height: 100, rotation: 0 })
    return () => {
      return (
        <div style={'width:100%;height:100%'}>
          <DDR
            axis="x"
            minHeight={20}
            minWidth={20}
            maxWidth={200}
            maxHeight={200}
            parent={true}
            grid={[10, 10]}
            v-model:value={t.value}
          >
            <div style={{ width: '100%', height: '100%', background: 'red' }}>
              <div>x= {t.value.x}</div>
              <div>y= {t.value.y}</div>
              <div>w= {t.value.width}</div>
              <div>h= {t.value.height}</div>
            </div>
          </DDR>
          <button onClick={() => (t.value.x += 100)}> to right</button>
        </div>
      )
    }
  },
})

特色

• 轻量级，无任何依赖
• 可配置拖拽、旋转、缩放、网格对齐、限制父元素内移动、固定坐标轴移动、等比例缩放

注意事项

• 容器如果使用了 overflow scroll 也会导致组件拖拽时的位置错误

属性

自定义 class 样式

• 拖动状态： ddr-ready-drag 鼠标按下,准备拖动时的 class。ddr-dragging 拖动时的 class
• 缩放状态： ddr-ready-resize 鼠标按下，准备缩放时的 class。ddr-resizing 缩放时的 class
• 旋转状态： ddr-ready-rotate 鼠标按下，准备旋转时的 class。ddr-rotating 旋转时的 class
• 选中状态： active 组件选中时的 class

事件

拖拽、旋转、缩放时会触发一系列事件，该事件都会传入两个参数，第一个参数为原始的事件对象，第二个参数为当前组件的位置信息。

链接

• 在线演示

• 更新日志

联系我

如果在使用该组件时遇到问题，可以加 QQ(2498683974)联系我。欢迎提出宝贵意见和建议

License

The MIT License (MIT). Please see License File for more information.