使用"vuedraggable"插件实现列表排序功能；

不多说，上代码。

首先是你自己协商列表代码，

在页面中引入vuedraggable

import draggable from "vuedraggable";

	<draggable
					v-model="kindList"
					:options="{ animation: 380 }"
					@end="end"
				>
					<div
						class="list"
						v-for="(item, index) in kindList"
						:key="item.id"
					>
						<div class="ind">{{ index + 1 }}</div>
						<div class="kindname">
							<!-- -->
							{{ item.name }}
						</div>
						<div class="button">
							<button
								class="el-icon-edit-outline"
								@click="kindCompile(item.id)"
							></button>
							<button
								class="el-icon-delete"
								@click="kindDel(item.id)"
							></button>
						</div>
					</div>
				</draggable>

　　在页面中将你的列表包在<draggable></draggable>中，注意v-model和你下面的数组要一致。

最后是其中的end方法：

	async end(evt) {
			var ids = this.kindList.map(item => {
				return item.id;
			});
			let { code, data } = await this.$api.put({
				url: "你的接口地址",
				data: {
					newsIdList: ids
				}
			});
			if (code == 1) {
				this.kindListInfo();
			}
		},

　这里我们是传一个改变后的id数组给后端，然后实现排序。