一个可拖拽的React标签组件

最新推荐文章于 2024-07-24 23:00:08 发布
最新推荐文章于 2024-07-24 23:00:08 发布
阅读量8.7k 收藏 6
点赞数 2
文章标签： 前端 javascript react react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Y__G__Y/article/details/80488149
版权

最近的项目里需要实现一个标签组件，内部标签可任意拖动排序。网上搜了一圈发现几乎没有现成的基于react的组件能很好的满足需求。
较为知名的是
最低0.47元/天 解锁文章
Y__G__Y
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
一个可拖拽顺序，可添加可删除的React标签组件
weixin_41458007的博客
11-10 851
关于react+ts中react-draggable-tags onChange事件不会触发，拿不到拖拽后的数组，官方回复是“示例上确实触发了，但是在实际的react+ts项目中并没有触发这个onChange事件”于是我就自己写了一个。
react-draggable-tab:像可拖动标签的原子React组件
05-02
React可拖动选项卡 像可拖动标签的原子React组件。演示版安装npm install --save react-draggable-tab react-draggable-tab v0.4.0支持React v0.14。 对于React v0.13.x，请使用react-draggable-tab v0.3.3。原料药...
React中实现拖拽布局 react-grid-layout
weixin_58346650的博客
06-14 518
在现代的Web应用中，灵活的布局和用户交互是非常重要的。拖拽布局允许用户通过拖动和调整大小来动态地改变页面布局，从而提供更好的用户体验。是一个强大的React库，它使得实现这种拖拽布局变得非常简单。本文将介绍如何在React项目中使用库来实现可定制的拖拽布局。通过本文的讲解，我们了解了如何在React项目中使用库来创建灵活的拖拽布局。这个库不仅易于使用，而且功能强大，可以满足各种复杂布局的需求。
react在组件内插入标签_react拖拽添加新组件
weixin_34677379的博客
01-30 287
1.因为对react框架思想还不是很熟，遇到问题习惯通过js解决。2.这次拖拽添加新组件，js通过dom操作，直接在网页中某个元素上append一个元素就可以了，但是react显然不能这么做，例如，动态添加一个自定义组件或者图表。3.解决方法：定义一个数组this.state={chartList:[]}，确定拖拽某种类型组件后，在数组中添加一个组件(?)。更新组件，最后通过render输出4.该...
手写react可拖拽弹窗组件
OUalen的博客
01-11 892
import React, { useEffect, useRef, useState } from 'react' import { PlusOutlined, FullscreenOutlined, FullscreenExitOutlined, } from "@ant-design/icons"; import style from './index.less' const PopModal= (props)=> { let { ...
React 拖拽 插入自定义标签
localhost
02-21 1248
拖拽 在光标处插入自定义节点
react 拖拽组件 react-sortable-hoc的使用
weixin_43138550的博客
02-09 2393
react 拖拽组件 react-sortable-hoc
最好的 6 个 React Table 组件详细亲测推荐
蒋川@卡拉云
03-22 8021
在日常开发中，特别是内部使用的后台系统时，我们常常会需要用表格来展示数据，同时提供一些操作用于操作表格内的数据。简单的表格直接用原生 HTML table 就好，但如果要在 React 中实现一个功能丰富的表格，其实是非常不容易的。
20230517----重返学习-react组件化开发-小知识-创建一个React组件
seetoyou的博客
05-17 531
组件化开发组件化+工程化React中的组件化开发在Vue2中，其组件的划分有两大思路：TableList方法名属性名思路一：全局组件与局部组件，目前公司项目中划分的主要模式。首先要创建一个 XxxXxx.vue 的单文件组件。VoteDemo这样在任何一个组件中，都可以直接调用这个组件！函数组件与类组件this.xxx在React中，其组件不分全局和局部的，或者说都是局部组件。都得引入才能使用。.vue.jsx.jsx后缀.js后缀.js后缀.jsx后缀.jsx后缀文件.js后缀文件。
React拖拽组件react-grid-layout实现表单设计
kongxx的专栏
04-03 741
左边是个控件列表，这里只放了三个控件:input, password和select；这里的控件需要增加 draggable 属性，标识控件可拖拽，比如：Input</Button>右边是个布局区域，可以在上面拖拽摆放控件位置，使用 react-grid-layout 的 Responsive 实现。当每个左侧控件拖到这个区域后，将根据具体类型，展示位具体样式。下面看一下代码实现，首先初始化三个控件，用来默认摆放着右侧的布局区域内# 初始化三个控件。
Html 标签拖动组件（react）
weixin_43356511的博客
10-30 337
html标签拖动组件封装（react） 直接上组件（可以直接使用） import React from 'react'; import scss from "../../../assets/styles/map.module.scss"; /** * * @param el * @param event * @param handler * @returns * * 添加拖动事件 */ const addEvent = (el: any, event: any, handler:
react-一个React的图片多剪裁组件
08-15
3. **选择区域**：用户应该能自由选择图片上的裁剪区域，这需要一个可拖动和调整大小的选区，可以使用CSS变换和事件监听来实现。 4. **裁剪操作**：选定区域后，组件应根据选区进行裁剪，并实时更新预览。这涉及到...
magnifier-for-react:React可拖动的标签
04-27
React Magnifier是一个多功能的React组件，它允许用户为他们输入的图像创建缩放窗格。 用户需要指定原始图像的图像URL和大小以及缩放窗格的缩放级别。 然后，这将在原始图像下方创建一个框，当鼠标悬停在其上方时...
react-Reactvis一组数据可视化图表React组件
08-15
React-vis 是一个强大的数据可视化库，专为React应用程序设计。这个库提供了一系列丰富的图表组件，使得在React项目中创建交互式、美观的数据展示变得轻松易行。以下是对React-vis及其功能的详细阐述： 1. **React...
react-treeview-draggable:React树视图可拖动
06-05
`react-treeview-draggable`是一个专为React设计的组件库，它提供了树形视图的功能，并且支持元素的拖放操作，极大地增强了用户体验。这个库使得开发者能够轻松地构建可自定义、可扩展的树状数据结构，并允许用户...
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
最新发布
yangshuquan的专栏
07-24 830
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
Hutool SoapClient 调用使用@webservice 发布的webService接口，参数传递为空
FangX_u的博客
07-24 613
采用工具类Hutool SoapClient调用@webservice 发布的webService接口时，参数传递不到webService,可以借助SoapUI工具辅助查看。
Windows10+vs 2017中创建WEB API教程
Explinks的博客
07-24 1041
本文将介绍如何在Windows10+vs 2017中创建web Api的教程。目前本教程当中的方法在Win10 + VS2017（MVC5）win server2016+vs2017，vs2013 vs2019当中测试通过。
material-ui 版本v5.12.2 可拖拽标签的组件
04-27
你可以使用 Material-UI 官方提供的 `Draggable` 组件来实现可拖拽标签的功能。具体实现步骤如下： 1. 首先安装 `react-draggable` 和 `@types/react-draggable` 依赖，可以使用以下命令进行安装： ``` npm install react-draggable @types/react-draggable ``` 2. 导入 `Draggable` 组件和相关类型： ```jsx import { Draggable, DraggableData, DraggableEvent } from 'react-draggable'; ``` 3. 在组件中使用 `Draggable` 组件，并设置相关参数： ```jsx <Draggable axis="both" // 设置拖拽的方向，可选值为 "x"、"y"、"both"，默认为 "both" handle=".handle" // 设置拖拽的把手元素，可选值为 CSS 选择器字符串或 DOM 元素 defaultPosition={{ x: 0, y: 0 }} // 设置拖拽的初始位置 grid={[20, 20]} // 设置拖拽的网格大小，数组第一个值为 x 方向的网格大小，第二个值为 y 方向的网格大小 onStart={handleStart} // 拖拽开始时调用的回调函数 onDrag={handleDrag} // 拖拽进行中调用的回调函数 onStop={handleStop} // 拖拽结束时调用的回调函数 > <div className="handle">拖拽把手</div> <div>可拖拽的内容</div> </Draggable> ``` 其中，`onStart`、`onDrag` 和 `onStop` 回调函数分别接受两个参数：`event` 和 `data`，分别代表拖拽事件和拖拽数据。你可以在这些回调函数中实现自己的逻辑。 4. 根据需求自定义样式，例如可以使用以下样式使拖拽把手显示为一个标签： ```css .handle { cursor: move; padding: 4px 8px; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px; } ``` 以上就是使用 Material-UI 实现可拖拽标签的组件的基本步骤，你可以根据自己的需求进行进一步的定制。
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值