React中对表格实现列表的拖拽排序

已于 2024-02-29 11:27:43 修改
阅读量923 收藏 4
点赞数 6
分类专栏： React 文章标签： react.js 前端 前端框架
于 2024-02-29 10:04:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_46031207/article/details/136362127
版权
本文介绍了在React中如何利用'react-sortable-hoc'库实现表格数据的拖拽排序功能。通过安装并引入该库，结合SortableContainer、SortableElement和SortableHandle组件，设置属性如axis、onSortEnd等，可以实现拖拽手柄进行行的水平或垂直拖拽排序，同时详细解释了onSortEnd方法处理拖拽结束后的元素位置交换操作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. 效果：推拽手柄列

在这里插入图片描述

2. 实现： react中我们需要两个包来实现

  • ‘array-move’
  • ‘react-sortable-hoc’

Installation

Use npm

$ npm install react-sortable-hoc --save

在这里插入图片描述
在这里插入图片描述

引入
import { arrayMoveImmutable } from 'array-move'
import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc'

GitHub: react-sortable-hoc

官方

Basic Example

import React, {
   Component} from 'react';
import {
   render} from 'react-dom';
import {
   SortableContainer, SortableElement} from 'react-sortable-hoc';
import arrayMove from 'array-move';

const SortableItem = SortableElement((
最低0.47元/天 解锁文章
React通过原生鼠标事件实现拖拽(drag and drop)列表重排序
莫小猪的菜鸟进阶路
06-25 3174
虽然现在html5已经有支持拖拽的事件，但是支持还不那么全面。所以目前大部分的拖拽还是通过原生的鼠标事件来实现列表重新排序。话不多说。一步步开始做吧 盆友们可以通过下面链接查看所有代码和效果。 https://codesandbox.io/s/drap-and-drop-to-reorder-list-iqwqj Step1.准备一个模拟数据 let list = []; for(let i = 0; i< 10; i++){ list.push(`item ${i}`); } Step2
React +TS实现拖拽列表
weixin_45440288的博客
11-22 772
最近使用React写的拖拽组件，分享给大家，直接上代码。
react 实现表格列表拖拽排序
二三的博客
01-30 4602
在项目开发中，遇到这样一个需求：需要对表格里面的数据进行拖拽排序。
react实现一个列表的拖拽排序(react实现拖拽)
最新发布
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
03-12 1856
比较流行的有react-beautiful-dnd和dnd-kit，可能还有react-sortable-hoc，不过这个好像已经不再维护了。我的项目里使用了antd，antd表格有一个示例还是挺像的，本来我想用Table实现，它自带拖拽。这个作者最后推荐了dnd-kit所以我最后选择了这个库，但其实我这个需求用react-beautiful-dnd‌ 也能实现。您还需要确保安装了对等依赖项。这里有两个版本，我不想用immutability-helper库，觉得多一个依赖没啥意义，所以我去掉了。
React-基于react的拖拽并自动排序
08-14
基于react 的拖拽并自动排序
react列表拖拽排序组件
qq_31644543的博客
01-30 1399
1、封装的拖拽排序组件。
react实现可拖拽的列表
米莉亚姆的小窝
01-04 1092
一个比较简单的拖拽列表，仅仅学习使用。如果想要用于生产，推荐Ant Design的整个drag_list分为列表body和上面的若干数据项card。
react 表格实现拖拽功能
hyy的博客
05-30 927
项目背景 : react + ant 单纯实现拖拽确实不难 , 我的需求是根据后台接口返回 , 生成对应的父子表格 , 并只可以拖拽子的位置 , 如图 后台返回的数据结构 (pid为0说明是父 , 子的pid等于父的id , 说明是父的子) 1 , 我先转成了树形结构且自己加上了key (注意 : key一定得是唯一的 , 否则会出现第一列数据拖拽不动 , 其他列数据可以拖拽的bug) 2 , 生成对应的父子表格 , 父要有对应的子 , 如图 3 ,更改onDragEnd的逻辑 , 实现效果 首先用.fi
最全的React拖拽排序组件库对比研究
程序员成长指北
03-01 894
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群一、用法简介基于react的拖拽功能，有这么几个比较流行的库：react-dndreact-beautiful-dnddnd-kitreact-sortable-hocReact-dnd（一）基本概念Backend：后端主要用来抹平浏览器差异，处理 DOM 事件，同时把 DOM 事件转换为 Rea...
学习使用ReactDnD实现嵌套列表的拖拽排序
08-12
在这个主题中，我们将深入探讨如何利用ReactDnD来实现嵌套列表的拖拽排序。 首先，我们需要安装ReactDnD库。通过npm或yarn可以轻松完成： ```bash npm install react-dnd react-dnd-html5-backend # 或者 yarn add...
React-react拖动排序组件
08-14
react拖动排序组件
react-table-hoc-draggable-columns:用于可拖动列的ReactTable HOC
04-28
React表可拖动的列 用于可拖动列的ReactTable HOC 高阶组件，使Draggable列可用于重新排序或交换头寸。 *注意：此版本支持React Table V6。 文献资料 安装 npm install --save react-table-hoc-draggable-columns 用法 import ReactTable from 'react-table' ; import "react-table/react-table.css" ; import withDraggableColumns from 'react-table-hoc-draggable-columns' ; import 'react-table-hoc-draggable-columns/dist/styles.css' ; const ReactTableDraggableColumns =
React+Antd-可视化拖拽表单
12-03
基于react结合antd-form，实现可视化表单拖拽，左侧为自定义所有的组件，中间为工作区，拖拽左侧到工作区，目前可以进行删除等操作，可以自己再优化添加其他功能，右侧为组件名称，描述等，可以自己优化添加其他。本项目提供思路等
react 自定义拖拽排序列表
一起学习前端知识，一起成为前端开发工程师！
08-10 2507
最近在公司开发时，遇到需要自定表单，并且自定表单中的单选和复选选项需要用户可以自定义拖拽排序，经过一个星期的查阅各种资料和实践，写个总结！二、实践经过一系列的查询，发现React Sortable与array-move可以实现这一功能！附上官网链接对应git源码因此借鉴官网案例开始我们的对应的需求开发！要实现是需要三个主要组件。............
react拖拽排序、js列表拖拽
Xpy 的博客
07-06 1284
列表拖动排序的解决方案有多种，个人感觉最简单的就是zent 提供的 Sortable 组件了 一、zent - Sortable 拖拽排序（推荐、简单明了） zent 官网 https://zent-contrib.gitee.io/zent/zh/component/sortable zent githubApi文档 https://zent-contrib.gitee.io/zent/apidoc/ 用法： yarn add zent # or npm install zent --save
React实现列表拖放
cc常 的博客
09-17 1176
记录React实现列表拖放 我是站在巨人的肩膀上哈哈。原作者里面用的类实现，因为我需要用组件实现，所以进行了改动和备注。害怕原作者的编辑链接失效，所以记录一下。 原作者 React通过原生鼠标事件实现拖拽(drag and drop)列表重排序 根据实际情况进行改写。这里存在bug：如果列表中有输入内容，会导致不能输入等情况。应该是没有做事件捕获处理，解决了再来更。 import React, { useState } from "react"; import "./styles.css"; le
react-dnd实现列表拖拽排序
cx18333的博客
07-07 3121
项目原本使用了`react-beautiful-dnd`来实现拖拽效果,由于项目中在最外层的`layout`布局中会根据屏幕的宽度和设置的适配宽度比较计算来得出` transform: 'scale`属性的值来做不同分辨率下的屏幕的兼容和适配;奈何 `react-beautiful-dnd`是根据 DOM 元素的位置和尺寸来计算的。当改变元素的缩放比例时，会改变元素的位置和尺寸，会导致拖拽操作的计算不准确,从而导致拖拽异常`拖拽的元素跑偏`.于是直接改用`react-dnd`,解决问题
react+node实现拖拽排序列表
weixin_43756315的博客
08-18 483
前端拖拽排序之后点击排序同步，向服务端传入排序结果顺序，服务端首选查询出数据库当前排序数据，通过生成变动模型的方式查询出变化的数据进行update操作。，增加数据需要为idx赋值为idx列的 最大值+1，删除数据则需要将idx大于当前值的列进行 当前值 -1 的操作。最近在搞dataV可视化轮播大屏项目，发现大屏链接多起来在数据库维护就很麻烦，急需一个操作界面来进行管理。服务端采用express+mysql的方式，数据库查询使用sequelize框架。操作主要分为数据变动和顺序变动。......
react ant 表格实现 多级嵌套拖拽排序和多选
11-07
在React中，Ant Design是一个常用的UI库，提供了丰富的表格组件(Table)用于数据展示。若要在Ant Design Table中实现多级嵌套的拖拽排序和多选功能，你需要结合其提供的Column、Form、Draggable以及Selection components。以下是一个概述： 1. **列配置** (Column): 使用`children`属性可以创建嵌套结构。你可以设置`sorter`属性使其支持排序，并在需要的地方启用`draggable`属性以便于拖拽。 ```jsx import { Column } from 'antd'; // 嵌套列示例 const nestedColumns = [ { title: '父列', children: [ { title: '子列1', sorter: true, draggable: true, // ...其他配置 }, { // 同样可以设置拖拽排序和多选属性 }, ], }, ]; ``` 2. **表格组件** (Table): 利用`onRow`回调处理行的复杂交互，比如在拖拽事件中更新数据状态，并通过`selection`属性控制多选。 ```jsx import { Table } from 'antd'; const { Column, SelectionModel } = Table; const selection = new SelectionModel({ // 初始化选择模式，如checkbox或多选 type: 'checkbox', }); // 更新表格状态，当有行被拖动 function handleSortChange(recordIndex, order) { // 更新数据模型的排序 } function handleSelectChange(selections) { // 根据选择的行操作数据 } <Table columns={nestedColumns} rowKey="key" selection={selection} onRow={(record) => ({ ...record, onSortChange: handleSortChange.bind(null, record.index), onSelectChange: handleSelectChange.bind(null, selections), })} /> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值