Vue-cli3 Creates the project
vue create vue-sortable
Install sortablejs
yarn add sortablejs
Results show
code
<template> <div> <span> <button v-show="edit" @click="visiavle"> <span v-show="! Edit "> <button @click="save"> Save </button> <button @click="cancel"> </span> <ul class="list" id="list"> <li v-for="(item,index) in items" :key="item.id"> <input v-show="! edit" @click="add(item.id,index,$event)" type="checkbox" ref="checkbox" /> <b>{{item.nm}}</b> </li> </ul> </div> </template> <script> import Sortable from "sortablejs"; Export default {data () {return {ids: [],// Indexs: [],// current sorted index array Sort: null, // Store sorTableJS instance object edit: True, // Edit status copyItems: [], // Cancel standby array topItems: [], // top standby array saveItems: [], items: [{id: 1, nm: "1"}, {id: 2, nm: "22" }, { id: 3, nm: "333" }, { id: 4, nm: "4444" }, { id: 5, nm: "55555" }, { id: 6, nm: "666666" } ] }; }, methods: {/ add/save to set-top id (id, index, event) {if (event. The currentTarget. Checked) {/ / save to top the id of the standby, this. Send the background ids. Push (id); // Determine the status of the current checkbox this.indexs. Push (index); } else {// Checkbox uncheck let I = this.indexs. FindIndex (v => v == index); this.indexs.splice(i, 1); let k = this.ids.findIndex(v => v == id); this.ids.splice(k, 1); } // console.log(this.indexs,this.ids)}, // console.log(this.indexs,this.ids)}, // top () {this.indexs = this.indexs. b) => b - a) this.topItems = JSON.parse(JSON.stringify(this.items)); If (this.indexs. Length > 0) {this.indexs. ForEach (v => {this.topitems. Unshift (this.topitems. 1) [0]); this.saveItems.push(this.topItems.splice(v,1)[0]) }); this.saveItems.reverse() this.topItems = [...this.saveItems,...this.topItems] console.log(this.saveItems) This.$refs.checkbox.forEach(v => {// uncheck the checkbox status v.checkked = false; }); } else { return } this.items = [...this.topItems]; this.indexs = []; this.topItems = []; this.ids = []; This.saveitems = []}, cancel () {// Cancel this.visiavle(); this.items = this.copyItems; this.Sort.destroy(); }, save () {// Save this.visiavle(); this.Sort.destroy(); }, visiavle () {// button display toggle // edit to true before copying the original array this.edit? (this.copyItems = JSON.parse(JSON.stringify(this.items))) : ""; // Copy the original array this.edit =! this.edit; ! this.edit && this.sort(); }, // sort method sort () {var _this = this; var $ul = document.getElementById("list"); this.Sort = new Sortable($ul, { onUpdate: Function (event) {var newIndex = event.newIndex, oldIndex = event.oldIndex, $li = $ul.children[newIndex], $oldLi = $ul.children[oldIndex]; $ul.removechild ($li); If (newIndex > oldIndex) {$ul.insertBefore($li, $oldLi); } else { $ul.insertBefore($li, $oldLi.nextSibling); Var item = _this.items. Splice (oldIndex, 1); _this.items.splice(newIndex, 0, item[0]); // The next tick will go patch}, animation: 150}); }}}; </script> <style scoped> li { list-style: none; background: palegoldenrod; width: 200px; } ul { display: flex; justify-content: space-evenly; } </style>Copy the code