亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

react實現(xiàn)記錄拖動排序

 更新時間:2023年07月11日 08:46:32   作者:yuyuyu37  
這篇文章主要介紹了react實現(xiàn)記錄拖動排序的相關(guān)資料,需要的朋友可以參考下

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

  • react-dnd antd組件的拖動排序都是用的這個庫,使用比較靈活,但是要配置的東西比較多,需求復(fù)雜時使用這個庫;
    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 在項目中看到引用了這個庫,使用起來也不算復(fù)雜,就試著用了這個庫,不過只支持水平或垂直拖動,一行或者一列元素時可以使用,可惜這個需求時兩行多列元素,也沒辦法用;
    <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)上搜索的時候,又看到這個庫,使用起來比較簡單,使用SortableList包裹要拖拽元素的容器,SortableElement包裹要拖拽的子元素,設(shè)置容器拖拽方向axis={'xy'}即可使grid布局的多個元素支持水平和豎直方向拖動排序;
    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>
    

好久沒更新博客了,最近工作比較忙,差不多每天都要加班,中間有經(jīng)歷搬家,沒時間坐下來總結(jié)學(xué)到的東西。工作的時候因為這塊花費了一些時間,想到可能別人也會遇到類似問題,所以就記錄下來了

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

相關(guān)文章

  • 詳解React中函數(shù)式組件與類組件的不同

    詳解React中函數(shù)式組件與類組件的不同

    React?函數(shù)式組件與類組件的主要區(qū)別在于它們的定義和聲明方式以及它們之間的一些特性,所以本文就詳細(xì)的給大家講講React中函數(shù)式組件與類組件有何不同,需要的朋友可以參考下
    2023-09-09
  • react實現(xiàn)路由攔截的示例代碼

    react實現(xiàn)路由攔截的示例代碼

    這篇文章主要介紹react實現(xiàn)路由攔截的,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2024-02-02
  • 如何使用Redux Toolkit簡化Redux

    如何使用Redux Toolkit簡化Redux

    這篇文章主要介紹了如何使用Redux Toolkit簡化Redux,幫助大家更好的理解和學(xué)習(xí)使用React框架,感興趣的朋友可以了解下
    2021-04-04
  • 詳解React 16 中的異常處理

    詳解React 16 中的異常處理

    這篇文章主要介紹了詳解React 16 中的異常處理的相關(guān)資料,React 16.x 版本中,引入了所謂 Error Boundary 的概念,從而保證了發(fā)生在 UI 層的錯誤不會連鎖導(dǎo)致整個應(yīng)用程序崩潰;未被任何異常邊界捕獲的異??赡軙?dǎo)致整個 React 組件樹被卸載,需要的朋友可以參考下
    2017-07-07
  • 如何將你的AngularJS1.x應(yīng)用遷移至React的方法

    如何將你的AngularJS1.x應(yīng)用遷移至React的方法

    本篇文章主要介紹了如何將你的AngularJS1.x應(yīng)用遷移至React的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-02-02
  • React Hook之使用Effect Hook的方法

    React Hook之使用Effect Hook的方法

    這篇文章主要為大家詳細(xì)介紹了React 使用Effect Hook的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-03-03
  • React添加或移除類的操作方法

    React添加或移除類的操作方法

    這篇文章主要介紹了React添加或移除類的操作方法,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-05-05
  • React-Native左右聯(lián)動List的示例代碼

    React-Native左右聯(lián)動List的示例代碼

    本篇文章主要介紹了React-Native左右聯(lián)動List的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • react調(diào)試和測試代碼的小技巧

    react調(diào)試和測試代碼的小技巧

    在開發(fā)React應(yīng)用時,嚴(yán)格模式StrictMode可以幫助開發(fā)者捕捉到組件中的錯誤和潛在問題,安裝React Developer Tools瀏覽器擴展檢查組件的props和狀態(tài),直接修改以及分析性能,@testing-library/react和Cypress或Playwright等工具可以有效地測試React組件和執(zhí)行端到端測試
    2024-10-10
  • React項目搭建與Echarts工具使用詳解

    React項目搭建與Echarts工具使用詳解

    這篇文章主要介紹了React項目搭建與Echarts工具使用詳解,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-03-03

最新評論