Drag and drop VUE components

npm install awe-dnd --save

import VueDND from 'awe-dnd' Vue.use(VueDND) 

 <template> <div class="color-list"> <div class="color-item" v-for="color in colors "v-dragging="{ item: color, list: colors, group:'color', otherData: otherData }" :key="color.text" >{{color.text}}div> div> template> <script> export default { data () {return {colors: [{ text: "Aquamarine" }, {text: "Hotpink" }, {text: "Gold" }, {text: "Crimson" }, {text: "Blueviolet" }, {text: "Lightblue" }, {text: "Cornflowerblue" }, {text: "Skyblue "}, {text: "Burlywood" }]} }, mounted () {this.$dragging.$on('dragged', ({ value }) => {console.log(value.item) console.log(value.list) console.log(value.otherData) }) < span class="hljs-keyword">this.$dragging.$on('dragend', () => {})}}  script>   span>  span>

Author: real_ting Link: https://www.jianshu.com/p/7afcf8a7af75 Source: The copyright of the short book belongs to the author. For any form of reprint, please contact the author for authorization and indicate the source.

Recently, I am optimizing a vue blog system, and I want to implement the article dragging function at the article list. I tried the awe-dnd vue plug-in and found it to be quite easy to use.

Install

npm install awe-dnd --save

Use

In main.js, Import through Vue.use

import VueDND from 'awe-dnd' Vue.use(VueDND) 

Use in vue files

 <template> <div class="color-list"> <div class="color-item" v-for="color in colors "v-dragging="{ item: color, list: colors, group:'color', otherData: otherData }" :key="color.text" >{{color.text}}div> div> template> <script> export default {data () {return {colors: [{ text: " Aquamarine" }, {text: "Hotpink" }, {text: "Gold" }, {text: "Crimson" }, {text : "Blueviolet" }, {text: "Lightblue" }, {text: "Cornflowerblue" }, {text: "Skyblue" }, {text: "Burlywood" }]} }, mounted () {< span class="hljs-keyword">this.$dragging.$on('dragged', ({ value }) => {console .log(value.item) console.log(value.list) console.log(value.otherData) }) this.$dragging.$on('dragend', () => {})}} script>   span>  span>

Component parameters

After dragging is completed, you need to submit the new array sequence to the background and create a sort_order field to save the sequence.

Reference: Draggable sorting vue component, github