react中实现拖拽排序

效果图：如下

效果说明：

        1. 点击“选择”按钮，打开弹窗

        2. 左侧数据是调接口回显来的

        3. 点击左侧某条数据，这条被点击的数据就会被添加到右侧

        4. 右侧的数据可以上下拖动换位置

        5.  右侧有数据时，点击"确定" 按钮，数据就会以字符串拼接形式回显到TextArea框里，以顿号(、)分割 

        6. antd3里面的拖拽组件用的 react-dnd的

<DndProvider backend={HTML5Backend}> 。但在我这项目里DndProvider就不适用（项目react版本16.8.6），换一种react-dnd的低版本的写法即DragDropContext

        7. 还有一些样式的问题，没写全，需要细调

         

        

代码难免会涉及到业务需求，展示部分代码，全部复制不能实现效果，仅供参考

1. 父

import React, { PureComponent } from 'react'
import { Row, Input, Button, Modal, Spin } from 'antd'
import DragSortingTable from './DragSortingTable' // 拖拽组件const TextArea = Input.TextArea;class SelectProject extends PureComponent {constructor(props){super(props)this.state= {modalVisible: false,loading: false,disabled: false,rightList: [],leftList: [],value: '',}}// 打开弹窗openModal = () => {this.setState({ modalVisible: true })}// 关闭弹窗onCloseModal = () => {this.setState({ modalVisible: false })}// 确定onOkModal = () => {const { rightList } = this.state;let stringData = ''rightList && rightList.forEach((item, index) => {if(index < rightList.length -1){stringData += `${item.destOrgName}`} else {stringData += item.destOrgName}})this.setState({ modalVisible: false, value: stringData })}// 点击左侧数据okDataClick = (item) => {const { rightList } = this.state;let list = JSON.parse(JSON.stringify(rightList))if(JSON.stringify(list).indexOf(JSON.stringify(item)) > -1){message.warning(`已选择${item.destOrgName}`)return false;}list.push(item)this.setState({ rightList: list })}// 左侧数据展示treeLeftList = () => {const { leftList } = this.state;const radioLeftList = []if(leftList[0]){leftList.forEach(item => {radioLeftList.push(<div onClick={() => this.okDataClick(item)} style={{ lineHeight: '24px', padding: '4px 0', cursor: 'pointer' }}>{item.destOrgName}</div>)})}return radioLeftList}// 拖拽后，更新右侧数据updataSetState = (newData) => {this.setState({ rightList: newData })}// 删除当前行数据clearHang = (item) => {const { rightList } = this.state;const radioLeftList = []rightList.map(subItem => {if(subItem.destOrgName !== item.destOrgName){radioLeftList.push(subItem)}})this.setState({ rightList: radioLeftList })}// 左右两列整体展示buttonForm = () => {const { rightList } = this.state;return (<div><Row><Col span={12}><span>选择xx</span><div>{this.treeLeftList()}</div></Col><Col span={12}><div><span>已选中xx</span><a>清空</a></div><div><DragSortingTable2 rightList={rightList} updata={this.updataSetState} clearHang={this.clearHang} /> // 重点：用的antd3的表格可拖拽</div></Col></Row></div>)}render () {return (<div><Row><TextArea autoSize disabled={} value={this.state.value} /><Button onClick={() => {this.setState({ modalVisible: true,loading: true,}); this.openModal()}}disabled={this.state.disabled}>选择</Button></Row>{ this.state.modalVisible ?<Modal title='' visible={this.state.modalVisible} maskCloseable={false}width='60%' onCancel={this.onCloseModal} footer={<div style={{ textAlign: 'center'}}><Button onClick={this.onOkModal} type='primary'>确定</Button><Button onClick={this.onCloseModal}>关闭</Button></div>}><Spin spin={this.state.loading} tip='Loading'>{this.buttonForm()}</Spin></Modal> : null}</div>)}}export default SelectProject

拖拽子组件

相当于拖拽的table组件全部复制过来，然后主要改动是moveRow，和render里面的。

        1. 至于table有表格样式，就把表格样式设置border: 0   

        2. 页码不显示pagination={false}

        3. 当table没数据时，会显示一个空数据的图标，把空数据图标隐藏起来：z-index: -2

2. 子

import { Table } from 'antd';
import { DragDropContext, DragSource, DropTarget } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';let dragingIndex = -1;class DragSortingTable extends PureComponent {render() {const { isOver, connectDragSource, connectDropTarget, moveRow, ...restProps } = this.props;const style = { ...restProps.style, cursor: 'move' };let { className } = restProps;if (isOver) {if (restProps.index > dragingIndex) {className += ' drop-over-downward';}if (restProps.index < dragingIndex) {className += ' drop-over-upward';}}return connectDragSource(connectDropTarget(<tr {...restProps} className={className} style={style} />),);}
}const rowSource = {beginDrag(props) {dragingIndex = props.index;return {index: props.index,};},
};const rowTarget = {drop(props, monitor) {const dragIndex = monitor.getItem().index;const hoverIndex = props.index;// Don't replace items with themselvesif (dragIndex === hoverIndex) {return;}// Time to actually perform the actionprops.moveRow(dragIndex, hoverIndex);// Note: we're mutating the monitor item here!// Generally it's better to avoid mutations,// but it's good here for the sake of performance// to avoid expensive index searches.monitor.getItem().index = hoverIndex;},
};const DragableBodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({connectDropTarget: connect.dropTarget(),isOver: monitor.isOver(),
}))(DragSource('row', rowSource, connect => ({connectDragSource: connect.dragSource(),}))(BodyRow),
);class DragSortingTable extends React.Component {components = {body: {row: DragableBodyRow,},};// 拖拽moveRow = (dragIndex, hoverIndex) => {const {rightList, updataSetState} = this.props;const dragRow = rightList[dragIndex];const newDataList = [...rightList]newDataList.splice(dragIndex, 1)newDataList.splice(hoverIndex, 0, dragRow)updataSetState(newDataList)};render() {const columns = [{title: <span style={{fontSize:'12px', color: '#71bbff'}}>{'长按可拖动排序'}</span>,dataIndex: 'destOrgName',key: 'destOrgName',render: (text, record) => {return (<span>{text}</span><a onClick={() => this.props.clearHang(record)} style={{ float:'right'}}>x</a>)}}];return (<Tablecolumns={columns}dataSource={this.props.rightList} // 父级传过来的components={this.components}onRow={(record, index) => ({index,moveRow: this.moveRow,})}pagination={false} // 不显示页码className='dataListTable'/>);}
}}const DragSortingTable2 = DragDropContext(HTML5Backend)(DragSortingTable)
export default DragSortingTable2