react-dnd-block v1.0.0

react-dnd-block

• Created By ancf - (博客地址)https://kafeihaoka.github.io/myBlog.html#/welcome

• react-dnd-block 为一款基于react-dnd实现的标签维度拖拽排序组件，可自定义UI样式。

DEMO示例地址：https://kafeihaoka.github.io/react-dnd-block/

安装依赖

npm i react-dnd-block -S

API 介绍

彩色块数据

data: [],  注入组件数据

data数据模型 ==>

        [{
            label:'',
            value:0
          },
          {
              ...同上
          },
           {
              ...同上
           },
           {
              ...同上
           }
        ]

function 选择

onChange: ()=> {},  返回最新的data数据，注意在此方法里将返回的data数据设置为最新的data数据；

用法示例

import DNDBlock from "react-dnd-block";

class DNDBlockDemo extends React.Component {
      state = {
        data :Array.from({length:60}).map((v,i) => ({label:'item' + i,value:i}))
      };

    changeBlock = (v) => {
        console.log(v)
        this.setState({
            data: v
        })
    }

  render() {
    const { data } = this.state;
    return (
      <div>
        <DNDBlock
          data={data}
          onChange={this.changeBlock}
        />
      </div>
    );
  }
}

ReactDOM.render(<DNDBlockDemo />, mountNode);

相关资料

• react react-dnd react-dnd-html5-backend

API

react-dnd-html5-backendhttps://react-dnd.github.io/react-dnd/docs/backends/html5