react 拖拽功能

用法简介

基于react的拖拽功能，有这么几个比较流行的库：
1. react-dnd
2. react-beautiful-dnd
3. dnd-kit
4. react-sortable-hoc
点击查看原文

介绍react-sortable-hoc 用法

下载==>(项目中安装 react-sorting-hoc 以及 array-move，后者是用来实现数组移动。)
- yarn add react-sortable-hoc array-move
- npm add react-sortable-hoc array-move
项目页面中引入包
- import {sortableContainer, sortableElement} from 'react-sortable-hoc';
- import arrayMove from 'array-move';
基本概念
- SortableContainer 拖拽排序的容器
- SortableElement 拖拽排序的元素

用法

在 render 里写
```
<SortableContainer distance={10} items={sendMsgList || []} onSortEnd={this.onSortEnd} />
```
// items里存放需要便利拖拽的数组

// distance属性作用：(设置触发排序之前要拖动的最小距离) eg：可以设置为10px

目的：防止拖拽组件里的onClick时间不能触发

	// 列表拖动
	onSortEnd = ({oldIndex, newIndex}) => {
		const {sendMsgList} = enterpriseMicroSOP.addTeskNode;
		if (oldIndex !== newIndex) {
			const newData = arrayMove([].concat(sendMsgList), oldIndex, newIndex).filter(el => !!el);
			enterpriseMicroSOP.addTeskNode.sendMsgList = JSON.parse(JSON.stringify(newData));
		}
	};

		const SortableContainer = sortableContainer(({items}) => {
			return (
				<div className={style.Timeline_info} ref={this.listRef} onScrollCapture={() => this.handleScroll()}>
					{items.map((item_, index_) => {
						if (item_.sendType == 0) {
							return <RenderTextInfo key={`item-${index_}`} index={index_} index_={index_} item_={item_} disabled={false} />;
						}
						
					})}
				</div>
			);
		});

需要创建一个ref节点目的是为了拖拽滚动的时候，滚动位置不变

this.listRef = React.createRef();

	componentDidUpdate() {
		// 滚动位置不变
		this.listRef.current.scrollTop = this.scrollTop;
	}

需要排序的元素（也要写在render里面）

// 渲染文本样式
		const RenderTextInfo = sortableElement(({item_, index_}) => {
			return (
				<div className={style.list_template} key={index_}>
					<div className={style.left}>
						<div className={style.list_template_left}>
							<span>{index_ + 1}</span>
						</div>
						<div className={style.text_info}>{item_.sendTypeMessage}</div>
					</div>
				</div>
			);
		});

介绍react-beautiful-dnd 用法

下载
- yarn add react-beautiful-dnd
- npm install react-beautiful-dnd --save
项目页面中引入包
- import {DragDropContext, Droppable, Draggable} from 'react-beautiful-dnd';
基本用法
1. DragDropContext : 用于包装拖拽根组件，Draggable和Droppable都需要包裹在DragDropContext内
2. Draggable 用于包装你需要拖动的组件，使组件能够被拖拽（make it draggable）
3. Droppable 用于包装接收拖拽元素的组件，使组件能够放置（dropped on it）

	return (
			<DragDropContext onDragEnd={this.handleDragEnd}>
				<Droppable droppableId="droppable">
					{(provided, snapshot) => (
						<div {...provided.droppableProps} ref={provided.innerRef} className={style.drop_col_container} key={'droppable'}>
							{typeList.map((item, index) => {
								if (this.props.isCustomerGroup) {
									if (item.typeKey == 'file' || item.typeKey == 'miniprogram') return;
								}
								return (
									<Draggable key={item.id} draggableId={String(item.id)} index={index}>
										{(provided, snapshot) => (
											<div
												ref={provided.innerRef}
												{...provided.draggableProps}
												{...provided.dragHandleProps}
												key={index}
												className={`${style.drop_item} ${this.state.activeKey == item.typeKey ? style.drop_item_selected : ''}`}>
												<div className={style.drop_col}>
													<div className="drop"></div>
													<TextArea
														id={'SortName'}
														className="SortName"
														onChange={e => {
															this.handleInputChange(e, item.typeKey);
														}}
														value={item.typeName}
														showCount
														placeholder="请输入名称"
														maxLength={10}
														rows={1}
													/>
												</div>
											</div>
										)}
									</Draggable>
								);
							})}
						</div>
					)}
				</Droppable>
			</DragDropContext>
		);

handleDragEnd = result => {
		const {typeList} = this.state;
		if (!result.source || !result.destination) return;
		const sourceIndex = result.source.index; // 被拖动元素位置
		const endIndex = result.destination.index; // 拖动的位置
		const list = this.swapArr(typeList, sourceIndex, endIndex);
		this.setState({typeList: list});
	};

// 排序
	swapArr(arr, index1, index2) {
		if (index1 > index2) {
			arr.splice(index2, 0, arr[index1]);
			arr.splice(index1 + 1, 1);
		} else {
			arr.splice(index2 + 1, 0, arr[index1]);
			arr.splice(index1, 1);
		}
		return arr;
	}