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 介绍

Property	Description	Type	Default
data	设置组件数据	array	-
width	设置拖拽区域宽度	string	100%
className	增加拖拽区域自定义class	string	''
title	拖拽区域label文字	string	已选
tagColor	拖拽区域标签颜色自定义	string	'#fd9f2f'
tagBorderRadius	拖拽区域标签自定义圆角	array	['0px', '0px']
clearButtonBorderRadius	拖拽区域清空标签自定义圆角	string	'0px'
clearButton	是否开启全部清除按键	bool	true
hint	拖拽区域底部提示段落	string	'可随意拖拽改变标签顺序'
onChange	拖拽排序及删除操作	function(e){}	-

拖拽块数据

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-backend]https://react-dnd.github.io/react-dnd/docs/backends/html5