背景：
作为一名前端开发人员，在工作中难免会遇到拖拽功能，分享一个github上一个不错的拖拽js库，能满足我们在项目开发中的需要，下面是我在uniapp中使用SortableJS的使用详细流程；
vue开发的web项目可以参考我的另一篇文章
Vue中拖动排序功能,引入SortableJs，前端拖动排序。
https://blog.csdn.net/weixin_64530670/article/details/132328122?spm=1001.2014.3001.5501
开始前先下载好Sortable至项目中,可直接下载min包,官方文档:
SortableJs中文文档
- sortable下载到本地 renderjs只支持H5和App-vue，不支持小程序和App-nvue开发
- 下载好后,在html代码处,找到你要拖拽排序的元素的父元素,给它设置一个id,我这边设置的就是'sort' ,然后 给要拖拽的元素设置:data-id 它的作用是,决定了拖拽结束后返回给你一个怎样的数组,传item.id,它就会自动在拖拽结束后返回给你一个后排序好的id数组. 然后我们就可以拿去处理数据,发请求保存顺序啦!
<view class="appList" id="sort"> <view class="appItem" v-for="(item,index) in usualist" :key='item.appId' :data-id="item.appId"> <view class="remove" @tap="remove(item)"> <u-icon name="minus-circle-fill"></u-icon> </view> <image class="img" :src='getimgUrl(item.overImgUrl)' v-if="Boolean(item.overImgUrl)"></image> <view class="first" v-else> {{getfirst(item.name)}} </view> <view class="appIntroduction"> <text>{{item.name}}</text> </view> <view class="totop"> <u-icon name="list"></u-icon> </view> </view> </view>
- css:
.sort { display: flex; align-items: center; flex-wrap: wrap; &-item { width: 200rpx; height: 100rpx; display: flex; align-items: center; justify-content: center; border-radius: 15rpx; background: #f5f5f5; margin: 5rpx; } }
- js代码 再写一个script标签:
<script module='sortable' lang="renderjs"> import Sortable from 'static/Sortable.min.js' export default { mounted() { this.initSortable() }, methods: { initSortable() { if (typeof window.Sortable === 'function') { this.setSortable() } else { const script = document.createElement('script') script.src = '/static/Sortable.min.js' script.onload = this.setSortable.bind(this) document.head.appendChild(script) } }, setSortable() { let option = { animation: 150, delay:300, onEnd: (e) => { // 拖拽完成后回调 this.$ownerInstance.callMethod('changeSort', sortable.toArray()); } } let sortable = Sortable.create(document.getElementById('sort'), option); }, } } </script>
以上代码中,在执行完拖拽后会执行changeSort方法,这个方法需要写到原本的那个script中:
changeSort(e) { console.log(e) this.flag = true this.updatelist = e.join(',') },
拖拽后打印出来的e就是有已经排序好的每一项的id组成的数组。
