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)


相关推荐

  • vue集成activiti工作流_vue 异步渲染

    vue集成activiti工作流_vue 异步渲染一、安装px2rem-loadernpminstallpx2rem-loader二、配置build文件夹下utils.js,找到generateLoaders 修改如下配置constpx2remLoader={loader:’px2rem-loader’,options:{remUnit:75//设计稿宽度/10}…

    2022年10月28日
  • JsonPath用法详解

    JsonPath用法详解JSONPath是一种信息抽取类库,是从JSON文档中抽取指定信息的工具,提供多种语言实现版本,包括Javascript、Python、PHP和Java。JSONPath的安装方法如下:pipinstalljsonpathJSONPath语法和XPATH语法对比JSON结构清晰,可读性高,复杂度低,非常容易匹配。JSONPath的语法与Xpath类似,如下表所示为JSONPath与XPath语法对比。下面使用一个JSON文档演示JSONPath的具体使用。JSON文档的内容如下:{

  • 我看撸啊撸

    我看撸啊撸题图:byfrombilojackson360行,行行出状元。我相信今天大家的朋友圈应该被IG刷屏了。ig牛逼。可能有的人还一脸懵逼,不知道到底发生了什么。就…

  • html遮罩层动画制作,flash简单制作遮罩动画效果[通俗易懂]

    html遮罩层动画制作,flash简单制作遮罩动画效果[通俗易懂]flash简单制作遮罩动画效果QQ空间的开机动画大家应该都有,从最初的出现的一点到后面全部出现,如此神奇的效果到底是怎么做的呢,一起来看看吧!遮罩特效:由于百度只能上传500k以内的照片,所以效果图片质量不是很好,当然,我们一般做的特效是.swf,这里是为了方便大家观看,所以做成了gif.步骤:1、打开flash面板,创建新项目。2、点击文件——导入——导入一张图片。3、窗口——库,这里我们可以…

  • 前端开发写代码哪个软件更好用?

    前端开发写代码哪个软件更好用?群里的朋友,经常问到web前端开发写代码用那个软件好?今天在这里统一回答下,主流的web前端开发写代码的软件有这些Webstorm、Vscode、SublimeText、HBuilder、Dreamweaver、notepad++、editplus等,做前端这么多年了,下面谈下我的使用感受吧。1.WebStorm【推荐】WebStorm是jetbrai…

  • 控制流和数据流的区别_jdk动态代理底层原理

    控制流和数据流的区别_jdk动态代理底层原理JBPM工作流原理

发表回复

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

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