大家好，又见面了，我是你们的朋友全栈君。
最近做一个拖拽排序的功能找了好几个有一个步骤简单，结合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
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/107327.html原文链接：https://javaforall.net
