How to implement drag-and-drop function in vuedraggable

This article mainly introduces the relevant knowledge of vuedraggable how to achieve drag-and-drop function, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this vuedraggable article on how to achieve drag-and-drop function. Let's take a look.

First, download dependent npm I-S vuedraggable II, code block {{item.name}} / / introduce vuedraggable import draggable from 'vuedraggable' export default {components: {draggable} Data () {return {enabled: true, myArray: [{name:' Linfen', value:1}, {name:' Yuncheng', value:2}, {name:' Changzhi' Value:3}, {name:' Jincheng', value:4}],}}, methods: {onChange (checkedValues) {console.log (checkedValues) / / the value selected in the check box}, checkMove () {console.log (this.myArray) / / Real-time myarray data, each time you drag to get the latest arrangement data},} .flip-list-move {- webkit-transition:-webkit-transform 0.5s; transition:-webkit-transform 0.5s Transition: transform 0.5s; transition: transform 0.5s,-webkit-transform 0.5s;}. No-move {- webkit-transition:-webkit-transform 0s; transition:-webkit-transform 0s; transition: transform 0s; transition: transform 0s,-webkit-transform 0s;} .customers {opacity: 0.5; background: # c8ebfb List-group {min-height: 20px;} .list-group-item {cursor: move;} .list-group-item I {cursor: pointer;} .list-group-item:first-child {border-top-left-radius: 4px; border-top-right-radius: 4px;} .list-group-item {position: relative; display: block Padding: 10px 105px; margin-bottom:-1px; background-color: # fff; border: 1px solid # ddd;} .list-group-item:last-child {margin-bottom: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px;} III.

This is the end of the article on "how to achieve drag-and-drop in vuedraggable". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to achieve drag-and-drop function in vuedraggable". If you want to learn more, you are welcome to follow the industry information channel.