不多說，上程式碼。

首先是你自己協商列表程式碼，

在頁面中引入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陣列給後端，然後實現排序。