Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to achieve list drag-and-drop sorting effect in vue". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to achieve list drag-and-drop sorting effect in vue" can help you solve the problem.

The effect is as follows:

{{item.label}} import {Vue, Component, Prop, Watch} from "vue-property-decorator"; import {addWebsite} from'@ / api' @ Component ({components: {}}) export default class Test extends Vue {oldData: any = null; / / Old data pressed when sorting starts newData: any = null / / data of the drag and drop process / / list data dataList:any = [{id:1,label:' Test No. 1'}, {id:2,label:' Test No. 2'}, {id:3,label:' Test No. 3'}, {id:4,label:' Test No. 4'},] Dragstart (value: any) {this.oldData = value} / / record the information during the movement dragenter (value: any, e: any) {this.newData = value e.preventDefault ()} / / drag the final operation dragend (value: any) E: any) {if (this.oldData! = = this.newData) {let oldIndex = this.dataList.indexOf (this.oldData) let newIndex = this.dataList.indexOf (this.newData) let newItems = [... this.dataList] / / Delete the old node newItems.splice (oldIndex, 1) / / add a new node newItems.splice (newIndex, 0) to the target location in the list This.oldData) this.dataList = [... newItems]}} / / drag event (mainly so that the mouse cursor does not become suppressed when dragging) dragover (e: any) {e.preventDefault ()}} Sort-move {transition: transform 0.3s;} this is the end of the introduction to "how vue achieves list drag-and-drop sorting". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.