最近項(xiàng)目中要做一個(gè)拖動(dòng)排序功能，首先想到的是之前項(xiàng)目中用過(guò)的antd自帶的tree和table的拖動(dòng)排序，但是只能在對(duì)應(yīng)的組建里使用。這里用的是自定義組件，隨意拖動(dòng)排序，所以記錄一下實(shí)現(xiàn)流程

• react-dnd antd組件的拖動(dòng)排序都是用的這個(gè)庫(kù)，使用比較靈活，但是要配置的東西比較多，需求復(fù)雜時(shí)使用這個(gè)庫(kù)；

  class BodyRow extends React.Component {
    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 themselves
      if (dragIndex === hoverIndex) {
        return;
      }
      // Time to actually perform the action
      props.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),
  );
  
  <DndProvider backend={HTML5Backend}>
    <Table
      columns={columns}
      dataSource={this.state.data}
      components={this.components}
      onRow={(record, index) => ({
        index,
        moveRow: this.moveRow,
      })}
    />
  </DndProvider>
  

• react-beautiful-dnd 在項(xiàng)目中看到引用了這個(gè)庫(kù)，使用起來(lái)也不算復(fù)雜，就試著用了這個(gè)庫(kù)，不過(guò)只支持水平或垂直拖動(dòng)，一行或者一列元素時(shí)可以使用，可惜這個(gè)需求時(shí)兩行多列元素，也沒(méi)辦法用；

  <DragDropContext onDragEnd={this.onDragEnd}>
    <Droppable droppableId='phone-droppable'>
      {droppableProvided => (
        <div ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
          {this.state.phoneImages.map((image, index) => (
            <Draggable key={image||'upload'} draggableId={image||'upload'} index={index}>
              {(provided, snapshot) => (
                <div
                  ref={provided.innerRef}
                  {...provided.draggableProps}
                  {...provided.dragHandleProps}
                  style={{
                    ...provided.draggableProps.style,
                    opacity: snapshot.isDragging ? 0.8 : 1,
                    display: 'inline-block'
                  }}
                >
                  <img src={img}/>
                </div>
              )}
            </Draggable>
          ))}
          {droppableProvided.placeholder}
        </div>
      )}
    </Droppable>
  </DragDropContext>
  

• react-sortable-hoc 最后在網(wǎng)上搜索的時(shí)候，又看到這個(gè)庫(kù)，使用起來(lái)比較簡(jiǎn)單，使用SortableList包裹要拖拽元素的容器，SortableElement包裹要拖拽的子元素，設(shè)置容器拖拽方向axis={'xy'}即可使grid布局的多個(gè)元素支持水平和豎直方向拖動(dòng)排序；

  const SortableItem = SortableElement(({children}) => (
    <div>{children}</div>
  ));
  const SortableList = SortableContainer(({children}) => {
    return (
      <div style={{display: 'grid', gridTemplateRows: '117px 117px', gridTemplateColumns: '120px 120px 120px 120px'}}>
        {children}
      </div>
    );
  });
  
  <SortableList onSortEnd={this.onPadSortEnd} helperClass={Styles.sortableHelper} axis={'xy'}>
    {this.state.padImages.map((image, index) => (
      <SortableItem key={`pad-item-${index}`} index={index} className={Styles.sortableItem}>
        <img src={img}/>
      </SortableItem>
    ))}
  </SortableList>
  

好久沒(méi)更新博客了，最近工作比較忙，差不多每天都要加班，中間有經(jīng)歷搬家，沒(méi)時(shí)間坐下來(lái)總結(jié)學(xué)到的東西。工作的時(shí)候因?yàn)檫@塊花費(fèi)了一些時(shí)間，想到可能別人也會(huì)遇到類(lèi)似問(wèn)題，所以就記錄下來(lái)了

到此這篇關(guān)于react實(shí)現(xiàn)記錄拖動(dòng)排序的文章就介紹到這了,更多相關(guān)react記錄拖動(dòng)排序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論