Rect Es Drager 拖拽组件

Rect Es Drager
Draggable	Resizable	Rotatable

🌈介绍

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

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

运行项目

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

# 安装依赖
pnpm install

# 运行项目
pnpm dev

# 打包drager组件
pnpm build

# 打包文档
pnpm build:demo

主要目录介绍

目录	功能说明
packages/docs	项目示例文档、编辑器展示
packages/editor	编辑器核心代码
packages/drager	es-drager组件

综合案例

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

ES Drager Editor

相关文章

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

网格效果及使用方法

辅助线和撤销回退

元素组合与拆分

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

⚡ 使用说明

安装依赖

npm i react-es-drager -D

组件中直接使用

import Drager from 'react-es-drager'
import React, { useState, useEffect  } from 'react'

type ComponentType = {
  id?: string
  component: string
  text?: string
  width?: number
  height?: number
  top?: number
  left?: number
  angle?: number
  style?: React.CSSProperties
}
interface EditorState {
  componentList: ComponentType[]
}

const BasicComponent = () => {
  const [comDatas, setComDatas] = useState<EditorState>({
    componentList: [
      {
        id: 'div1',
        component: 'div',
        text: 'div1',
        width: 100,
        height: 100,
        left: 0,
        top: 0
      },
      {
        id: 'div2',
        component: 'div',
        text: 'div2',
        width: 100,
        height: 100,
        top: 100,
        left: 100
      }
    ]
  })
  const onChange = (index: number, dragData: DragData) => {
  setComDatas((prevState) => ({
    componentList: prevState.componentList.map((item, i) =>
      i === index ? { ...item, ...dragData } : item
    )
  }))
  }
  return (
    <>
     <div className="es-editor">
        {comDatas.componentList.map((item, index) => (
          <Drager
            key={item.id}
            size={{
              width: item.width,
              height: item.height,
              left: item.left,
              top: item.top
            }}
            snap
            snapThreshold={10}
            markline
            onChange={(e: DragData) => onChange(index, e)}
          >
            <div>{item.text}</div>
          </Drager>
        ))}
    </>
  )
}

export default BasicComponent

Drager API

Drager 属性

属性名	说明	类型	默认
defaultSize	默认值	object	{width: 100, height: 100, left: 0, top: 0, angle: 0 }
size	外部传入属性值	object(内部属性同上)	-
color	颜色	^[string]	#3a7afe
resizable	是否可缩放	^[boolean]	true
rotatable	是否可旋转	^[boolean]	-
boundary	是否判断边界(最近定位父节点)	^[boolean]	-
disabled	是否禁用	^[boolean]	-
minWidth	最小宽度	^[number]	1
minHeight	最小高度	^[number]	1
maxWidth	最大宽度	^[number]	9999
maxHeight	最大高度	^[number]	9999
selected	控制是否选中	^[boolean]	-
checkCollision	是否开启碰撞检测	^[boolean]	-
snapToGrid	开启网格	^[boolean]	-
gridX	网格X大小	^[number]	50
gridY	网格Y大小	^[number]	50
snap	开启吸附	^[boolean]	-
snapThreshold	吸附阈值	^[number]	10
markline	辅助线([可自定义]	^[boolean]^[Function]	-
scaleRatio	缩放比	^[number]	1
disabledKeyEvent	禁用方向键移动	^[boolean]	-
border	是否显示边框	^[boolean]	true
aspectRatio	宽高缩放比	^[number]	-
equalProportion	宽高等比缩放(该属性和aspectRatio互斥，同时使用会存在问题)	^[boolean]	-
resizeList	显示的缩放handle列表，top, bottom, left, right, top-left, top-right, bottom-left, bottom-right	^[string[]]	-
guideline	吸附参考线	object	{h:[],v:[]}

Drager 事件

事件名	说明	类型
onChange	位置、大小改变	^[Function](dragData) => void
onDrag	拖拽中	^[Function](dragData) => void
onDragStart	拖拽开始	^[Function](dragData) => void
onDragEnd	拖拽结束	^[Function](dragData) => void
onResize	缩放中	^[Function](dragData) => void
onResizeStart	缩放开始	^[Function](dragData) => void
onResizeEnd	缩放结束	^[Function](dragData) => void
onRotate	旋转中	^[Function](dragData) => void
onRotateStart	旋转开始	^[Function](dragData) => void
onRotateEnd	旋转结束	^[Function](dragData) => void
onFocus	获取焦点/选中	^[Function](selected) => void
onBlur	失去焦点/非选中	^[Function](selected) => void

• dragData 类型

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

Drager 插槽

插槽名	说明
default	自定义默认内容
resize	缩放handle
rotate	旋转handle

引用

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