How to use vuedraggable to implement drag and drop function in vue3

This article mainly introduces the relevant knowledge of vue3 how to use vuedraggable 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 vue3 article on how to use vuedraggable to achieve drag-and-drop function. Let's take a look.

1. Npm i vuedraggable-S, using this command, vue3 will report an error, as shown in the following figure

2. Use npm uninstall vuedraggable-S to uninstall, and then use npm I-S vuedraggable@next to download the latest version

3. The code for vue is as follows:

Drag and drag

{{element}}

Import {reactive, toRefs, onMounted} from 'vue'import draggable from' vuedraggable' export default {name: 'dragAndDrop', components: {draggable}, setup () {const state = reactive ({drag: false, list: [1,2,3,4,5,6]}) onMounted (() = > {}) return {. ToRefs (state)}} .title {text-align: center; color: # 42b983 } .wrapper {display: flex; justify-content: center; width: 100%;} .item {width: 100px; height: 100px; font-size: 50px; text-align: center; line-height: 100px; margin: 10px; background-color: # 42b983; color: # ffffff;}

4. The effect is as follows

This is the end of the article on "how vue3 uses vuedraggable to implement drag-and-drop functionality". Thank you for reading! I believe you all have a certain understanding of "how to use vuedraggable to achieve drag-and-drop function in vue3". If you want to learn more, you are welcome to follow the industry information channel.