推荐一款 React组件 拖拽排序 Ti-Sortable-React

最新推荐文章于 2024-08-08 08:14:53 发布
最新推荐文章于 2024-08-08 08:14:53 发布
阅读量382 收藏 6
点赞数 10
文章标签： 开源 前端 javascript reactjs github
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75886863/article/details/135892700
版权
ti-sortable-react是一款强大的React组件，用于创建可拖动的网格布局，支持元素的重新排列和编辑。它简化开发过程，适合需要定制化和交互性的项目。通过npm或yarn轻松安装，配合VSCode推荐设置，方便二次开发者灵活嵌入功能.
摘要由CSDN通过智能技术生成

ti-sortable-react
能满足你开发的大部分实现需求，在帮助文档里含一些特殊交互的解决方案。(迭代中）

 

希望能帮你快速实现，让写代码成为简单的事情。
配置化组件ti-sortable-react, 快来下载吧。
注：
组件：在npm官方搜索ti-sortable-react
示例：在 GitHub 官方搜索 ti-sortable-react-test

 

ti-sortable-react

  • an excellent React component for draggable grid layouts. It allows you to easily rearrange and edit elements, making it perfect for creating flexible and interactive interfaces.

  • 是一个出色的 React 组件，用于创建可拖动的网格布局。它可以轻松地重新排列和编辑元素，非常适合构建灵活和交互性的界面。

描述

a great React component that provides a draggable grid layout and allows you to rearrange and edit elements. This component is easy to use and powerful, helping you quickly achieve flexibility and interactivity in your interface design. If you are developing a project that requires customization and interactivity, then ti-sortable is a great choice of component.

中文描述

是一个非常好的 React 组件，它提供了可拖动的网格布局，并允许你重新排列和编辑元素。这个组件易于使用，且功能强大，可以帮助你快速实现灵活性和交互性的界面设计。如果你正在开发一个需要可定制化和交互性的项目，那么 ti-sortable 组件是一个不错的选择。

Demo

Demo

640?wx_fmt=gif&wxfrom=5&wx_lazy=1&wx_co=1

​

Install

npm install ti-sortable-react
// or
yarn add ti-sortable-react

TiSortable

  • TiSortable Readme.md Chinese | English

Recommended IDE Setup

  • VS Code

Build a process for submitting npm projects

  • cd project's name file
  • npm init
  • npm install react@17.0.2 react-dom@17.0.2 sass@1.42.1 lodash@4.17.21 --save

Recommended IDE Setup

  • VS Code

640?wx_fmt=gif&wxfrom=5&wx_lazy=1&wx_co=1

 

提供二次开发的工程师​，自由嵌入功能元素，以满足各种业务需求。

640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

​

泥巴树 Tui.TANCE
关注
  • 10
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-sortable-hoc-article-app:React App展示如何实现拖放功能
05-06
`react-sortable-hoc`是一个高阶组件（HOC），它为React组件提供了可排序的能力，使得我们可以轻松地创建交互式、可拖动的列表。以下是关于这个主题的详细讲解。 首先，`React`是一个流行的JavaScript库，用于构建...
react-sortable-tree：用于嵌套数据和层次结构的拖放式可排序组件
02-05
一个用于对分层数据进行拖放式可排序表示的React组件。 查看，以演示一些基本功能和高级功能。 目录 入门 使用npm安装react-sortable-tree 。 # NPM npm install react-sortable-tree --save # YARN yarn add ...
React中使用react-sortablejs实现自定义表单设计器，实现拖拽，排序功能
white-hang的博客
09-13 3410
本文，主要讲解了如何使用react-sortablejs自定义实现一个表单设计器，文章中的代码涉及到拖拽和排序。
React 拖拽排序组件库对比研究
油墨香^-^的博客
04-17 1276
react-dnddnd-kitreact-dnd文档齐全github star星数16.4k维护更新良好，最近一月内有更新维护学习成本较高功能中等移动端兼容情况，良好示例数量中等概念较多，使用复杂组件间能解耦文档齐全github star星数24.8k维护更新良好，最近三月内有更新维护学习成本较高使用易度中等功能丰富移动端兼容情况，优秀示例数量丰富是为垂直和水平列表专门构建的更高级别的抽象，没有提供 react-dnd 提供的广泛功能。
最全的React拖拽排序组件库对比研究
2401_83384536的博客
07-15 1353
基于react的拖拽功能，有这么几个比较流行的库：react-dnddnd-kit文档齐全github star星数16.4k维护更新良好，最近一月内有更新维护学习成本较高功能中等移动端兼容情况，良好示例数量中等概念较多，使用复杂组件间能解耦文档齐全github star星数24.8k维护更新良好，最近三月内有更新维护学习成本较高使用易度中等功能丰富移动端兼容情况，优秀示例数量丰富。
react 实现表格列表拖拽排序
二三的博客
01-30 4223
在项目开发中，遇到这样一个需求：需要对表格里面的数据进行拖拽排序。
【React】react-beautiful-dnd 拖拽排序功能的实现
qing_小诺的博客
01-11 1116
如果 react 项目中需要用到拖拽功能，可以使用 react-beautiful-dnd 插件。点上图中的“All the examples!index.js代码如下：稍加改造就能直接用到项目中啦~~~
React中使用sortablejs实现拖拽排序
逆袭的菜鸟X
04-08 9918
1、使用npm装包 $ npm install sortablejs --save 2、引入Sortable import Sortable from "sortablejs"; 3、使用方法 <div className="grid-box" ref={this.sortableGroupDecorator}> {menus &am...
react-multi-sortable-hoc-demo:用于探索和处理 react-sortable-hoc 功能的演示项目
07-23
用于处理 react-sortable-hoc 功能的演示项目。 基于 参考 - 壮举：支持在列表之间拖动项目 这个项目是用引导的。 安装 # clone and cd into repo yarn install yarn start # open ...
react-native-sortable-listview：可以拖放的ListView包装器，用于React Native
02-16
不推荐使用 该库没有活动的维护程序，并且有许多未解决的问题。 不建议用于新项目。 考虑改用 。 react-native-sortable-listview 具有拖放功能的ListView的包装，用于React Native。 允许在拖动时通过自动滚动来拖...
react-sortablejs：一个基于成熟的拖放库Sortable构建的React组件
02-05
react-sortablejs React绑定到 请注意，由于仍然存在大量错误，因此尚未考虑将其投入生产。 产品特点 安装 sortablejs和@types/sortbalejs是对等依赖项。 后者仅在需要智能/打字稿时使用。 npm install --save ...
react-sortable:使用react实现的简单的可拖拽排序的列表
05-09
使用介绍 版本历史 m0: 最简单的警告提示 m1: 实现列表功能 m2: 实现选中功能
React-基于react的拖拽并自动排序
08-14
基于react 的拖拽并自动排序
React-react拖动排序组件
08-14
react拖动排序组件
drag-layout:基于React，可拖拽修改页面布局的插件
04-01
拖动布局 概述 基于react完成的一个插件，拖拽修改页面布局。核心代码在src/drag_layout/index.js。 演示 下载后项目启动 # install dependencies npm install # Start the service npm run start # build for development npm run dev # build for production npm run umd 提供参数 boxSource array 要排列的盒子的数据源 [ { id , title , width , height , top , left , render } ] id , title width , 1 ～12 代表格数， 整个宽包括12个格和11个固定margin hei
React-reactsortable一个可排序的React列表组件
08-14
react-sortable - 一个可排序的React列表组件
React实现拖拽效果
前端
09-24 2305
使用react完成拖拽功能
React-SortableJS 使用教程
最新发布
gitblog_00497的博客
08-08 763
React-SortableJS 使用教程 react-sortablejsReact bindings for SortableJS项目地址:https://gitcode.com/gh_mirrors/re/react-sortablejs 项目介绍 React-SortableJS 是一个基于 SortableJS 的 React 组件库，它允许用户在 React 应用中轻松实现拖放排序功...
react项目，用react-sortable-hoc写一个demo，hook写法
05-25
好的，下面是一个使用 React Hooks 和 `react-sortable-hoc` 库编写的简单的 demo： ```jsx import React, { useState } from 'react'; import { SortableContainer, SortableElement } from 'react-sortable-hoc'; const SortableItem = SortableElement(({ value }) => ( <div style={{ padding: '10px', background: '#f0f0f0', margin: '5px' }}>{value}</div> )); const SortableList = SortableContainer(({ items }) => { return ( <div> {items.map((value, index) => ( <SortableItem key={`item-${index}`} index={index} value={value} /> ))} </div> ); }); const Demo = () => { const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3', 'Item 4']); const onSortEnd = ({ oldIndex, newIndex }) => { setItems(items => items.reduce((arr, current, index) => { if (index === oldIndex) { return arr; } if (index === newIndex) { arr.push(items[oldIndex]); } arr.push(current); return arr; }, []) ); }; return <SortableList items={items} onSortEnd={onSortEnd} />; }; export default Demo; ``` 这个 Demo 中，我们使用了 `useState` 来管理列表项，并使用 `SortableContainer` 和 `SortableElement` 来渲染可拖拽的列表项。在 `onSortEnd` 回调中，我们通过更新 `items` 的顺序来更新列表项的顺序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值