效果:

背景：

作为一名前端开发人员，在工作中难免会遇到拖拽功能，分享一个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中文文档http://www.sortablejs.com

1. ​​sortable​​下载到本地  ​​renderjs​​只支持H5和App-vue，不支持小程序和App-nvue开发
2. 下载好后,在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>

3. 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;
   		}
   	}

4. 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组成的数组。