react-dragart React拖拽库

Example例子

使用文档

1、安装

npm install react-dragart --save 
yarn install  // 其他安装方式

2、属性说明

DragArt.Pane

| 属性 | 类型 | 说明 | | ---- |-----|------| | className | string | 可拖拽的面板类| | dragRule | string | 发送规则 |

DragArt

| 属性 | 类型 | 说明 | | ---- |-----|------| | className | string | 可拖拽的面板类| | selected | number | 当前移动的元素的索引（可选）| | dropRule | string | 接受规则 | | onDrop | function | 返回一个记录 | | onStart | function | 内部元素开始变化时回调（索引， 记录值， 事件对象）| | onResize | function | 内部元素变化时回调（索引， 记录值， 事件对象）| | onSelect | function | 内部元素选择时回调（索引， 事件对象）| | onUsable | function | 内部元素可编辑时回调（索引， 事件对象）|

DragArt.Pane

| 属性 | 类型 | 说明 | | ---- |-----|------| | x | number | X轴线距离| | y | number | Y轴线距离 | | height | number | 元素高度 | | width | number | 元素宽度| | zIndex | number | 元素层级|

3、实例代码

let test = [
  { title: '测试一', width: 400, height: 300 },
  { title: '测试二', width: 200, height: 300 },
  { title: '测试三', width: 100, height: 200 },
  { title: '测试四', width: 300, height: 200 },
  { title: '测试五', width: 400, height: 100 }
]
<DragArt.Pane className="test-drop"  dragRule="CPT">
  {
     test.map((item, idx) => {
        return (
          <div 
            key={idx} 
            WarpClass="test-drop-item" 
            data={item}
          >
            <p>{item.title}</p>
            <p>宽度：{item.width}</p>
            <p>高度：{item.height}</p>
          </div>
        )
      })
    }
</DragArt.Pane>

<DragArt
   dropRule="CPT"
   onDrop={this.handleDrop}
   onResize={this.handleResize}
>
  {
    this.state.source.map((item, idx) => {
     return (
        <DragArt.Item key={idx} {...item}>
          <span>{item.title}</span>
        </DragArt.Item>
      )  
    })
  }
</DragArt>