react-beautiful-dnd 横纵排序demo

简单导入就可以看到效果

1. 安装依赖

npm i react-beautiful-dnd

2. 纵向排序 

import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';// 纵向排序
const reorder = (list, startIndex, endIndex) => {const result = Array.from(list);const [removed] = result.splice(startIndex, 1);result.splice(endIndex, 0, removed);return result;
};const DirectGrid = () => {const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3', 'Item 4']);const onDragEnd = (result) => {// 如果没有目标位置,直接返回不执行任何操作if (!result.destination) return;// 使用Hook中的state进行reorder操作const newItems = reorder(items, result.source.index, result.destination.index);setItems(newItems);};return (<DragDropContext onDragEnd={onDragEnd}><Droppable droppableId="droppable" direction="vertical">{(provided) => (<div {...provided.droppableProps} ref={provided.innerRef}>{items.map((item, index) => (<Draggable key={item} draggableId={item} index={index}>{(provided) => (<divref={provided.innerRef}{...provided.draggableProps}{...provided.dragHandleProps}>{item}</div>)}</Draggable>))}{provided.placeholder}</div>)}</Droppable></DragDropContext>);
};export default DirectGrid;

3. 横向排序

import React from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
//  横向排序
const reorder = (list, startIndex, endIndex) => {const result = Array.from(list);const [removed] = result.splice(startIndex, 1);result.splice(endIndex, 0, removed);return result;
};const Grid = () => {const [items, setItems] = React.useState([{ id: '1', content: 'Item 1' },{ id: '2', content: 'Item 2' },{ id: '3', content: 'Item 3' },// ...more items]);const onDragEnd = (result) => {if (!result.destination) return;const items = reorder(this.state.items,result.source.index,result.destination.index);setItems(items);};return (<DragDropContext onDragEnd={onDragEnd}><Droppable droppableId="droppable">{(provided) => (<div ref={provided.innerRef} {...provided.droppableProps}>{items.map((item, index) => (<Draggable key={item.id} draggableId={item.id} index={index}>{(provided, snapshot) => (<divref={provided.innerRef}{...provided.draggableProps}{...provided.dragHandleProps}style={getItemStyle(snapshot.isDragging,provided.draggableProps.style)}>{item.content}</div>)}</Draggable>))}{provided.placeholder}</div>)}</Droppable></DragDropContext>);
};const getItemStyle = (isDragging, draggableStyle) => ({// some basic styles to apply when dragginguserSelect: 'none',padding: 10,margin: `0 0 ${isDragging ? 4 : 0}px 0`,// change background colour if draggingbackground: isDragging ? 'lightgreen' : 'lightblue',// styles we need to apply on draggables...draggableStyle,
});export default Grid;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/841227.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

v-rep---script-function

作用&#xff0c;实现&#xff0c;参数讲解。 script-function标签 作用 问题&#xff1a;如何在插件的接口中调用lua脚本中定义的函数&#xff1f; 用于声明一个函数&#xff0c;这个函数的作用是通过v-rep提供的接口sim::callScriptFunctionEx()调用脚本的函数&#xff0…

专业的力量:在自己的领域成为专家

专业的力量:在自己的领域成为专家 我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 现在稀缺的已不再是信息资源&#xff0c;而是运用信息的能力。过去的海…

Android 第三方框架:图片加载:Glide:功能介绍

文章目录 网络加载 网络加载方案 方案一:默认基于HttpUrlConnection方案二:提供与Google Volley和Square OkHttp快速继承的工具库网络优化方案 方案一:绑定生命周期,停止不必要的加载方案二:提供同步加载和异步加载图片解码 图片解码方案 方案一:系统提供的BitmapFactory…

Python中的单例模式:原理、实现与应用

Python中的单例模式&#xff1a;原理、实现与应用 一、引言 在软件开发中&#xff0c;设计模式是一种用于解决常见问题的最佳实践。单例模式&#xff08;Singleton Pattern&#xff09;是这些设计模式中的一种&#xff0c;它确保一个类仅有一个实例&#xff0c;并提供一个全局…

深入了解Nodejs模块机制

深入了解Nodejs模块机制 我们都知道Nodejs遵循的是CommonJS规范&#xff0c;当我们require(moduleA)时&#xff0c;模块是怎么通过名字或者路径获取到模块的呢&#xff1f;首先要聊一下模块引用、模块定义、模块标识三个概念。 1 CommonJS规范 1.1 模块引用 模块上下文提供…

安装部署统信UOS服务器操作系统1070e

原文链接&#xff1a;安装部署统信UOS服务器操作系统1070e Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇关于安装部署统信UOS服务器操作系统1070e的文章。统信UOS是一款基于Linux的国产操作系统&#xff0c;以其安全性和稳定性受到广泛关注。本文将详细介绍如何安…

58同城如何降低 80%的机器成本 | OceanBase案例

本文作者&#xff1a;58同城架构师刘春雷 一、背景介绍 58同城作为中国互联网生活服务领域的领军者&#xff0c;其平台规模居国内之首&#xff0c;涵盖了包括车辆交易、房产服务、人才招聘、本地生活服务以及金融等多元化的业务场景。 因其业务的广泛性和多样性&#xff0c;我…

飞天使-linux操作的一些技巧与知识点11-升级jenkins 版本

文章目录 升级jenkins 升级jenkins [rootgcp-hongkong-test-git ~]# cd /usr/share/java/ [rootgcp-hongkong-test-git java]# ll total 360004 -rw-r--r-- 1 root root 93489042 Apr 17 23:00 jenkins.war主要是去官网找到这个包&#xff0c;然后替换&#xff0c;重启jenkins…

Java开发大厂面试第26讲:生产环境如何排查问题和优化 JVM?

通过前面几个课时的学习&#xff0c;相信你对 JVM 的理论及实践等相关知识有了一个大体的印象。而本课时将重点讲解 JVM 的排查与优化&#xff0c;这样就会对 JVM 的知识点有一个完整的认识&#xff0c;从而可以更好地应用于实际工作或者面试了。 我们本课时的面试题是&#x…

如何在Linux中查看目录下的文件数量?

在管理Linux系统时&#xff0c;经常需要检查特定目录下的文件数量。这可以帮助我们了解目录的内容量和结构。以下是几种在Linux中查看目录下文件数量的方法&#xff0c;每种方法都适用于不同的场景。 1. 使用 ls 和 wc 命令 这是最直接的方法之一。使用 ls 命令列出目录内容&…

本地连接github仓库

【1】新建github仓库 【2】本地克隆并提交 $ git clone https://github.com/TomJourney/soil.git Cloning into soil... warning: You appear to have cloned an empty repository.pacosonDESKTOP-E4IASRJ MINGW64 /d/github/TomJourney/soil (master) $ git add readme.txtpa…

HTML静态网页成品作业(HTML+CSS+JS)——心理健康教育介绍网页(4个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;使用Javacsript代码使用下拉菜单的实现以及首页图片的轮播&#xff0c…

CS144(所有lab解析)

CS144 lab0-CSDN博客 (CS144 2024)Lab Checkpoint 1: stitching substrings into a byte stream &#xff08;详细解析&#xff09;-CSDN博客 CS144 Lab2 &#xff08;2024&#xff09;超详细解析-CSDN博客 Lab Checkpoint 3: the TCP sender-CSDN博客 CS144 Checkpoint 4: in…

windows7的ie11降级到ie8

重点是要在程序管理窗口中“查看已安装的更新”打开当前系统中已安装更新列表&#xff0c;找到两个IE11的更新&#xff08;见下图“卸载文件“&#xff09;并卸载掉&#xff0c;这样windows功能中的ie11才会变成ie8. 打开控制面板 进入面板&#xff0c;点击程序&#xff0c;进…

【设计模式】JAVA Design Patterns——Static Content Hosting(静态内容托管模式)

&#x1f50d;目的 将静态内容部署到基于云的存储服务&#xff0c;该服务可以将它们直接交付给客户端。 这可以减少对昂贵计算实例的需求。 &#x1f50d;解释 真实世界例子 全球性的营销网站&#xff08;静态内容&#xff09;需要快速的部署以开始吸引潜在的客户。为了将托管…

一个机器学习问题的重新定义

任何事物都有两面性。 一些机器学习问题也是如此。并非每个回归问题&#xff08;你认为的&#xff09;都需要回归。仔细考虑和审视问题的业务不仅可以帮助开发更好的模型&#xff0c;还可以找到有效的解决方案。 重构或重新定义&#xff08;reframing&#xff09;是一种改变机…

如何用ai打一场酣畅淋漓的数学建模比赛? 给考研加加分!

文章目录 数学建模比赛1. 数学建模是什么&#xff1f;2. 数学建模分工合作2.1 第一&#xff1a;组队和分工合作2.2 第二&#xff1a;充分的准备2.3 第三&#xff1a;比赛中写论文过程 3. 数学建模基本过程4. 2023全年数学建模竞赛时间轴5. 数学建模-资料大全6. 数学建模实战 数…

【feature selection】特征选择学习笔记

文章目录 1. 什么是特征选择2. 特征选择与特征提取的区别3. 特征选择的方法3.1 Filtering过滤法3.2 Wrapper包装法3.3 Embedding嵌入法 4. 特征选择示例4.1 方差选择法示例4.2 递归特征消除法示例 1. 什么是特征选择 特征选择是特征工程的内容, 其目标是寻找最优特征子集。剔除…

MTK下载AP

只升级选Firemare Upgrade &#xff0c;点下载后&#xff0c;关机下插入USB

无人机反制:光电干扰一体设备技术详解

一、光电干扰技术原理 光电干扰技术是一种利用光学和电子技术手段对无人机实施干扰和控制的先进技术。该技术通过向无人机发射特定频率和强度的光信号或电磁信号&#xff0c;干扰无人机的视觉系统、控制系统或通信链路&#xff0c;进而达到反制无人机的目的。光电干扰技术具有…