最近做一个拖拽排序的功能找了好几个有一个步骤简单，结合redux最好不过了，话不多说上代码
第一步：
npm install react-draggable-tags --save
第二步 sort.js
import React from 'react';
import ReactDOM from 'react-dom';
import {DraggableArea} from 'react-draggable-tags';
import './sort.scss'; class Sort extends React.Component {
//定义组件状态
state = {
initialTags:[
{id: , name: 'apple'}, {id: , name: 'watermelon'}, {id: , name: 'banana'},
{id: , name: 'lemon'}, {id: , name: 'orange'}, {id: , name: 'grape'},
{id: , name: 'strawberry'}, {id: , name: 'cherry'}, {id: , name: 'peach'}]
}
render() {
return (
<div className="Simple">
<DraggableArea
initialTags={this.state.initialTags}
render={({tag}) => (
<div className="tag">
{tag.name}
</div>
)}
onChange={(tags) => console.log(tags)}
/>
</div>
);
}
}
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就可以啦!.