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

Most people do not understand the knowledge points of this article "how to change locations in Vue.Draggable", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can gain something after reading this article. Let's take a look at this article "how to achieve Vue.Draggable switching locations".

As shown below:

C is dragged to the position of a, which is represented by the insertion of c in front of A. So it becomes cab.

Demand

Implement swapping instead of inserting and the image above will become (cba)

Mode of realization

It's impossible to stop it from inserting, so we have to wait for it to finish inserting and manipulate the element we want. For example, get the head and tail indexes. Swap their positions in the array. It is important to note that because the position of the elements in the array has been changed when dragging, we need to copy the same array as the original array before dragging.

Implementation steps

1. Choose a method that suits you, and you need to be able to get the start index and the end index.

End,sort,update is all right.

2. Deep copy

CopyList () {this.copyList=this.list.slice (0)}

3. Manipulate the copyList array position through the index

Const item= this.copyList [oldIndex] this.copyList.splice (oldIndex, 1, this.copyList [newIndex]); this.copyList.splice (newIndex, 1, item)

4. Assign copyList to list and get a new copy of copyList at the end

This.list=this.copyListthis.copyList = this.list.slice (0)

All codes

Import draggable from "@ / vuedraggable"; let id = 1 Export default {name: "simple", display: "Simple", order: 0, components: {draggable,}, data () {return {enabled: true, list: [{name: "a"}, {name: "b"}, {name: "c"}], dragging: false, index: 0, copyList: [],} }, computed: {draggingInfo () {return this.dragging? "under drag": ";},}, created () {this.copyList = this.list.slice (0);}, methods: {add: function () {this.list.push ({name:" Juan "+ id, id: id++});}, replace: function () {this.list = [{name:" Edgard ", id: id++}] }, end ({oldIndex, newIndex}) {const item = this.copyList [oldIndex]; this.copyList.splice (oldIndex, 1, this.copyList [newIndex]); this.copyList.splice (newIndex, 1, item); this.list = this.copyList; this.copyList = this.list.slice (0);},} {{element.name}} above is the content of this article on "how to switch locations in Vue.Draggable". I believe everyone has a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

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.