移动端的拖拽排序在react中实现 了解一下

最近做一个拖拽排序的功能找了好几个有一个步骤简单，结合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就可以啦!.