当前位置: 首页 > news >正文

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;

相关文章:

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) > {con…...

web练习

[CISCN 2022 初赛]ezpop ThinkPHP V6.0.12LTS 反序列化漏洞 漏洞分析 ThinkPHP6.0.12LTS反序列漏洞分析 - FreeBuf网络安全行业门户 解题过程 ThinkPHP V6.0.12LTS反序列化的链子可以找到&#xff0c;找到反序列化的入口就行 反序列化的入口在index.php/index/test 链子 …...

模型蒸馏笔记

文章目录 一、什么是模型蒸馏二、如何蒸馏三、常见问题3.1 四、参考文献 一、什么是模型蒸馏 Hinton在NIPS2014提出了知识蒸馏&#xff08;Knowledge Distillation&#xff09;的概念&#xff0c;旨在把一个大模型或者多个模型ensemble学到的知识迁移到另一个轻量级单模型上&a…...

HAL库使用FreeRTOS实时操作系统时配置时基源(TimeBase Source)

需要另外的定时器&#xff0c;用systic的时候生成项目会有警告 https://blog.51cto.com/u_16213579/10967728...

如何让你的网站能通过域名访问

背景 当我们租一台云服务器&#xff0c;并在上面运行了一个Web服务&#xff0c;我们可以使用云服务器的公网IP地址进行访问&#xff0c;如下&#xff1a; 本文主要记录如何 实现让自己的网站可以通过域名访问。 买域名 可以登录腾讯云等主流公有云平台的&#xff0c;购买域名…...

Spring Boot + Spring Security + JWT 从零开始

Spring Boot + Spring Security + JWT 从零开始 这篇笔记中,我们将学习如何从头开始设置一个带有Spring Security的Spring Boot应用程序,它连接到一个LDAP身份验证的Spring Security身份验证提供程序,这将是即将出现的,这个连接和工作都是开箱即用的。 实际上,设置这个非…...

【busybox记录】【shell指令】rmdir

目录 内容来源&#xff1a; 【GUN】【rmdir】指令介绍 【busybox】【rmdir】指令介绍 【linux】【rmdir】指令介绍 使用示例&#xff1a; 删除空目录 - 默认 删除dirname下的所有空目录&#xff0c;包括因删除其他目录而变为空的目录 常用组合指令&#xff1a; 指令不…...

[LitCTF 2023]yafu (中级) (素数分解)

题目&#xff1a; from Crypto.Util.number import * from secret import flagm bytes_to_long(flag) n 1 for i in range(15):n *getPrime(32) e 65537 c pow(m,e,n) print(fn {n}) print(fc {c})n 152412082177688498871800101395902107678314310182046454156816957…...

MySQL alter 语句

ALTER TABLE user ADD COLUMN cdkey varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin NULL DEFAULT NULL COMMENT CD-Key, ADD COLUMN erp_userid varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin NULL DEFAULT NULL COMMENT ERP用户ID, ADD UNIQUE INDEX un…...

列表推导式(解析式)python

Python中的列表推导式&#xff08;list comprehension&#xff09;是一种简洁且强大的语法&#xff0c;用于创建新的列表。它允许你通过对现有列表中的元素进行操作或筛选来快速生成新列表。以下是列表推导式的基本语法和一些示例&#xff1a; 基本语法&#xff1a; new_list…...

YOLO-10更快、更强

YOLO-10简介 主要贡献&#xff1a; 无NMS的一致双分配 YOLOv10提出了一种通过双标签分配而不用非极大值抑制NMS的策略。这种方法结合了一对多和一对一分配策略的优势&#xff0c;提高了效率并保持了性能。 高效的网络设计 轻量化分类头&#xff1a;在不显著影响性能的情况下&a…...

新火种AI|寻求合作伙伴,展开豪赌,推出神秘AI项目...苹果能否突破AI困境?

作者&#xff1a;小岩 编辑&#xff1a;彩云 2024年&#xff0c;伴随着AI技术的多次爆火&#xff0c;不仅各大科技巨头纷纷进入AI赛道展开角力&#xff0c;诸多智能手机厂商也纷纷加紧布局相关技术&#xff0c;推出众多AI手机。作为手机领域的龙头老大&#xff0c;苹果自然是…...

MFC工控项目实例一主菜单制作

1、本项目用在WIN10下安装的vc6.0兼容版实现。创建项目名为SEAL_PRESSURE的MFC对话框。在项目res文件下添加相关256色ico格式图片。 2、项目名称&#xff1a;密封压力试验机 主菜单名称&#xff1a; 系统参数 SYS_DATA 系统测试 SYS_TEST 选择型号 TYP_CHOICE 开始试验 TES_STA…...

代码随想录-Day22

235. 二叉搜索树的最近公共祖先 方法一&#xff1a;两次遍历 class Solution {public TreeNode lowestCommonAncestor(TreeNode root, TreeNode p, TreeNode q) {List<TreeNode> path_p getPath(root, p);List<TreeNode> path_q getPath(root, q);TreeNode anc…...

uniapp项目 使用vue-plugin-hiprint静默打印功能

插件地址&#xff1a;https://toscode.mulanos.cn/gyy155/vue-plugin-hiprint h5项目使用插件的静默打印功能 1.下载vue-plugin-hiprint和jquery npm install vue-plugin-hiprint npm install jquery --save2.在mian.js引入插件和jqerry //引入vue-plugin-hiprint import { h…...

视频汇聚EasyCVR视频监控平台GA/T 1400协议特点及应用领域解析

GA/T 1400协议&#xff0c;也被称为视图库标准&#xff0c;全称为《公安视频图像信息应用系统》。这一标准在公安系统中具有举足轻重的地位&#xff0c;它详细规定了公安视频图像信息应用系统的设计原则、系统结构、视频图像信息对象、统一标识编码、系统功能、系统性能、接口协…...

基于似然场的快速避障算法

系列文章目录 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 TODO:写完再整理 文章目录 系列文章目录前言相同思想的采样概率评估快速避障算法前言 认知有限,望大家多多包涵,有什么问题也希望能够与大家多交流,共同成长! 本文先对基于似然场的快速…...

Flutter 中的 IndexedStack 小部件:全面指南

Flutter 中的 IndexedStack 小部件&#xff1a;全面指南 Flutter 是一个功能强大的 UI 框架&#xff0c;它提供了多种方式来构建动态和响应式的用户界面。IndexedStack 是 Flutter 中的一个有趣的小部件&#xff0c;它允许开发者根据索引值来显示一组子元素中的一个。这使得 I…...

基于51单片机的交通灯设计

一.硬件方案 本设计能模拟基本的交通控制系统&#xff0c;用红绿黄灯表示禁行&#xff0c;通行和等待的信号发生&#xff0c;还能进行倒计时显示。按键可以控制禁行、深夜模式、复位、东西通行、南北通行、时间加、时间减、切换等功能。共四个二位阴极数码管&#xff0c;东南西…...

ECMAScript 详解

ECMAScript 详解 ECMAScript&#xff08;ES&#xff09;是JavaScript的标准化脚本语言&#xff0c;由ECMA国际通过ECMA-262标准进行规范。ECMAScript定义了语法、类型、对象模型和内置对象等基本特性&#xff0c;是JavaScript、JScript和ActionScript等语言的核心部分。 以下…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...