移动端的拖拽排序在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