react拖拽排序组件_uniapp拖拽生成器

react拖拽排序组件_uniapp拖拽生成器移动端的拖拽排序在react中实现 了解一下

大家好,又见面了,我是你们的朋友全栈君。

最近做一个拖拽排序的功能找了好几个有一个步骤简单,结合redux最好不过了,话不多说上代码

 

第一步:

npm install react-draggable-tags –save

 

第二步 sort.js


 1 import React from 'react';
 2 import ReactDOM from 'react-dom';
 3 import {DraggableArea} from 'react-draggable-tags';
 4 import './sort.scss';
 5 
 6 class Sort extends React.Component {
 7     //定义组件状态
 8     state = {
 9         initialTags:[
10             {id: 1, name: 'apple'}, {id: 2, name: 'watermelon'}, {id: 3, name: 'banana'},
11             {id: 4,  name: 'lemon'}, {id: 5, name: 'orange'}, {id: 6, name: 'grape'},
12             {id: 7, name: 'strawberry'}, {id: 8, name: 'cherry'}, {id: 9, name: 'peach'}]
13     }
14     render() {
15       return (
16         <div className="Simple">
17             <DraggableArea
18                 initialTags={
    
    this.state.initialTags}
19                 render={({tag}) => (
20                 <div className="tag">
21                     {tag.name}
22                 </div>
23                 )}
24                 onChange={(tags) => console.log(tags)}
25             />
26         </div>
27       );
28     }
29   }
30   export default Sort;


 


第三步 :sort.css
.Simple {
    border: 1px solid #E9E9E9;
    border-radius: 4px;
    width: 294px;
    height: 220px;
    padding: 5px;
  }
  .tag {
    margin: 3px;
    font-size: 13px;
    border: 1px dashed #cccccc;
    border-radius: 4px;
    padding: 0 8px;
    line-height: 30px;
    color: #666666;
    background: rgba(255, 255, 255, 0.7);
  }

  

以上就是可以拖拽排序的组件啦! 只需要控制state 中的initialTags就可以啦!.

 

转载于:https://www.cnblogs.com/wenbodeboke/p/Wenwen.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/107327.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 原来jdk自带了这么好玩的工具 > JPS使用教程「建议收藏」

    原来jdk自带了这么好玩的工具 > JPS使用教程「建议收藏」jps(JavaVirtualMachineProcessStatusTool)jsp是java提供的一个显示当前所有java进程pid的命令,适合在linux/unix平台上简单察看当前java进程的一些简单情况。很多人都是用过unix系统里的ps命令,这个命令主要是用来显示当前系统的进程情况,有哪些进程以及进程id。jps也是一样,它的作用是显示当前系统的java进程情况及进程id。我们可以通过它来查看我们到底启动了几个java进程(因为每一个java程序都会独占一个java虚拟机实

  • php获取server端mac和clientmac的地址[通俗易懂]

    php获取server端mac和clientmac的地址

  • 浅析AnyCast网络技术「建议收藏」

    浅析AnyCast网络技术「建议收藏」什么是BGPAnyCast?BGPanycast就是利用一个(多个)as号码在不同的地区广播相同的一个ip段。利用bgp的寻路原则,短的aspath会选成最优路径(bgp寻路原则之n),从而优化了访问速度。其实bgpanycast是不同服务器用了相同的ip地址。阿里的DNS就是使用了BGPAnyCast“其实bgpanycast是不同服务器用了相同的ip地址。”言简意赅啊!D…

  • ArcGIS 9.3 下载(包含ArcGIS Desktop、ArcGIS Engine、ArcGIS Server、ArcSDE、workstation)

    ArcGIS 9.3 下载(包含ArcGIS Desktop、ArcGIS Engine、ArcGIS Server、ArcSDE、workstation)ArcGIS9.3下载(包含ArcGISDesktop、ArcGISEngine、ArcGISServer、ArcSDE、workstation)

  • 设置smtp服务器信息,SMTP服务器设置(IIS6.0)

    设置smtp服务器信息,SMTP服务器设置(IIS6.0)由IIS提供的简单邮件传输协议(SMTP)服务交付传出电子邮件的简单组件。消息的递送由消息传送到一个指定的SMTP服务器发起。根据收件人的电子邮件地址的域名,SMTP服务器启动与域名系统(DNS)服务器,它抬起头,然后返回该域的目标SMTP服务器的主机名通信。接下来,发起SMTP服务器直接通过传输控制协议/Internet协议(TCP/IP)端口25上的目标SMTP服务器通信,如果收件人的…

  • win10黑群晖安装教程_黑群晖7.0安装教程

    win10黑群晖安装教程_黑群晖7.0安装教程使用芯片无忧工具,查看U盘的和。使用,格式化U盘。使用镜像写入工具,把引导写入U盘。修改文件,可以使用工具把文件复制到桌面,通过修改好之后,拖进这个界面中。或者在电脑中,查看U盘,打开U盘中的文件直接修改。具体修改内容如下:,因为我的主板上有4个sata口,然后PCIE扩展了6个SATA口,所以这里写了46,分别对应主板的SATA数目和PCIE的SATA数目。,因为主板的4个SATA口分别为00、01、02、03,所以PCIE的SATA从04开始。也就是说,前面两个00代表主板上的SATA控制从00开始计数

    2022年10月31日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号