0.1.22 • Published 5 years ago

rc-draggable v0.1.22

Weekly downloads
27
License
ISC
Repository
-
Last release
5 years ago

react 拖拽组件

完成功能

  • 容器组件( 锁定 / 排序 / 多层级 )
  • 标尺 (标尺坐标显示 / 新增删除标尺)
  • 图层树 (图层锁定 / 排序 / 删除 / 显示隐藏)
  • 拖拽组件 (拖拽 / 调整大小)
  • 标尺吸附功能 ( 临近x轴y轴自动吸附 )

示例

Image text

运行

npm run dev

props

  • zoom:number 缩放
  • width:number 宽度
  • height :number 高度
  • containerComps 容器组件
  • containerUpdate(node:ITreeNode) 容器组件触发的回调

组件调用

import 'rc-draggable/dist/index.css'  //引入样式表文件
import {DrawCanvas,DrawRuler,ContainerComps,LayerTree,connector} from 'rc-draggable'

export default function (props){
    return <DrawCanvas {...props}>
        <LayerTree />
        <DrawRuler />
        <ContainerComps />
    </DrawCanvas>
}
  • DrawCanvas 创建拖拽容器
  • DrawRuler 创建标尺
  • ContainerComps 创建容器组件
  • connector 高阶组件(用于组件扩展)