所以怎样实现列表点击整行上下移动?

Posted 2023-02-01 Vicky沛沛

前段时间做一个项目有,实现可以手动进行任务顺序调整,那么怎样实现呢!
于是就有了下文,react中bootstrap和react-flip-move实现列表动画效果上下移动

详情见github源码:https://github.com/smileyqp/flipMove

• 全局安装react

sudo npm install -g create-react-app

• 应用创建

create-react-app hello-world

• 添加sass支持

npm install node-sass --save

• 打包项目

npm run build

• bootstrap安装

npm install bootstrap

• 引用bootstrap样式等

import 'bootstrap/dist/css/bootstrap.css';

• 安装bulma(bulma使用方式和bootstrap一样)

npm install bulma

• 安装react-flip-mov的js库(用于js动画效果；适合于列表动画切换)

npm install react-flip-move

• 详细见github

 <FlipMove>
          
            items.map((item,index) =>(
              <li key=item.id className='list-group-item'>
                <div className='name'>item.name</div>
              
                <div className='btn-group'>
                  index>0?<button className='btn btn-primary'onClick=() => this.sortUp(index)>UP</button>:null
                  index<items.length -1 ?<button className='btn btn-dark'onClick=() => this.sortDown(index)>Down</button>:null
                </div>

              </li>
            ))
          
          </FlipMove>