react-es-drager v1.0.4

Rect Es Drager 拖拽组件

🌈介绍

基于 react18 + typescript + vite 的可拖拽、缩放、旋转的组件

• 拖拽&区域拖拽
• 支持缩放
• 旋转
• 网格拖拽缩放
• 拖拽编辑器

运行项目

# 拉取项目
git clone https://github.com/kakajun/react-es-drager.git

# 安装依赖
pnpm install

# 运行项目
pnpm dev

# 打包drager组件
pnpm build

# 打包文档
pnpm build:demo

主要目录介绍

综合案例

下面是基于 react-es-drager 实现的一个简单可视化拖拽编辑器

ES Drager Editor

相关文章

可拖拽、缩放、旋转组件实现细节

网格效果及使用方法

辅助线和撤销回退

元素组合与拆分

菜单操作栏、json数据导入导出

⚡ 使用说明

安装依赖

npm i react-es-drager -D

组件中直接使用

import Drager from 'react-es-drager'
const dragList = []
const BasicComponent = () => {
  return (
    <>
      {dragList.map((list, index) =>
        list.map((item, index2) => (
          <Drager
            key={`${index}-${index2}`}
            width={100}
            height={100}
            left={index2 * 150 + 30}
            top={index * 150 + 30}
            {...item}
            style={{ color: item.color }}
          >
            {item.text}
          </Drager>
        ))
      )}
    </>
  )
}

export default BasicComponent

Drager API

Drager 属性

Drager 事件

• dragData 类型

export type DragData = {
  width: number
  height: number
  left: number
  top: number
  angle: number
}

Drager 插槽

引用

本工程属于经原创同意,vue转react项目, 引用自es-drager, 本项目将会长期更新, 欢迎issue和pr