用法简介

  • 基于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 里写 ```javascript

// items里存放需要便利拖拽的数组 // distance属性 作用：(设置触发排序之前要拖动的最小距离) eg：可以设置为10px 

  1. 目的：防止拖拽组件里的onClick时间不能触发 
  2. ```javascript
  3. // 列表拖动
  4. onSortEnd = ({oldIndex, newIndex}) => {
  5.   const {sendMsgList} = enterpriseMicroSOP.addTeskNode;
  6.   if (oldIndex !== newIndex) {
  7.     const newData = arrayMove([].concat(sendMsgList), oldIndex, newIndex).filter(el => !!el);
  8.     enterpriseMicroSOP.addTeskNode.sendMsgList = JSON.parse(JSON.stringify(newData));
  9.   }
  10.     };
  1. const SortableContainer = sortableContainer(({items}) => {
  2.   return (
  3.     <div className={style.Timeline_info} ref={this.listRef} onScrollCapture={() => this.handleScroll()}>
  4.   {items.map((item_, index_) => {
  5.     if (item_.sendType == 0) {
  6.       return <RenderTextInfo key={`item-${index_}`} index={index_} index_={index_} item_={item_} disabled={false} />;
  7.       }
  9.       })}
  10.       </div>
  11.       );
  12.         });

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

    1. this.listRef = React.createRef();
    1. componentDidUpdate() {
    2. // 滚动位置不变
    3. this.listRef.current.scrollTop = this.scrollTop;
    4. }

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

    1. // 渲染文本样式
    2. const RenderTextInfo = sortableElement(({item_, index_}) => {
    3. return (
    4. <div className={style.list_template} key={index_}>
    5. <div className={style.left}>
    6. <div className={style.list_template_left}>
    7.  <span>{index_ + 1}</span>
    8. </div>
    9. <div className={style.text_info}>{item_.sendTypeMessage}</div>
    10. </div>
    11. </div>
    12. );
    13.    });

    介绍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）
  1. return (
  2.   <DragDropContext onDragEnd={this.handleDragEnd}>
  3.   <Droppable droppableId="droppable">
  4.     {(provided, snapshot) => (
  5.       <div {...provided.droppableProps} ref={provided.innerRef} className={style.drop_col_container} key={'droppable'}>
  6.       {typeList.map((item, index) => {
  7.         if (this.props.isCustomerGroup) {
  8.           if (item.typeKey == 'file' || item.typeKey == 'miniprogram') return;
  9.         }
  10.         return (
  11.           <Draggable key={item.id} draggableId={String(item.id)} index={index}>
  12.           {(provided, snapshot) => (
  13.             <div
  14.             ref={provided.innerRef}
  15.           {...provided.draggableProps}
  16. {...provided.dragHandleProps}
  17. key={index}
  18. className={`${style.drop_item} ${this.state.activeKey == item.typeKey ? style.drop_item_selected : ''}`}>
  19. <div className={style.drop_col}>
  20. <div className="drop"></div>
  21. <TextArea
  22. id={'SortName'}
  23. className="SortName"
  24. onChange={e => {
  25. this.handleInputChange(e, item.typeKey);
  26. }}
  27. value={item.typeName}
  28. showCount
  29. placeholder="请输入名称"
  30. maxLength={10}
  31. rows={1}
  32. />
  33. </div>
  34. </div>
  35. )}
  36. </Draggable>
  37. );
  38. })}
  39. </div>
  40. )}
  41. </Droppable>
  42. </DragDropContext>
  43.         );
  1. handleDragEnd = result => {
  2.   const {typeList} = this.state;
  3.   if (!result.source || !result.destination) return;
  4.   const sourceIndex = result.source.index; // 被拖动元素位置
  5.   const endIndex = result.destination.index; // 拖动的位置
  6.   const list = this.swapArr(typeList, sourceIndex, endIndex);
  7.   this.setState({typeList: list});
  8.     };
  1. // 排序
  2. swapArr(arr, index1, index2) {
  3.   if (index1 > index2) {
  4.     arr.splice(index2, 0, arr[index1]);
  5.     arr.splice(index1 + 1, 1);
  6.   } else {
  7.     arr.splice(index2 + 1, 0, arr[index1]);
  8.     arr.splice(index1, 1);
  9.   }
  10.   return arr;
  11.     }