Vue拖拽排序

• 先看看官网demo
  https://raw.githubusercontent.com/SortableJS/Vue.Draggable/master/example.gif

• 首先在vue项目中，用npm包下载下来

npm install vuedraggable -S

• 下载下来后，引入插件，在你的vue文件的script标签里面这样引入

import draggable from 'vuedraggable'

• 别忘了下面要注册组件

components: {
    draggable
},

• 完整代码

<template>
    <div>
        <draggable v-model="myArray">
            <div v-for="element in myArray" :key="element.id">
                {{element.name}}
            </div>
        </draggable>
    </div>
</template>
<script>
    import draggable from 'vuedraggable'

    export default {
        components: {
            draggable,
        },
        data() {
            return {
                myArray : [{
                    id:1,
                    name:"我是1号",
                },{
                    id:2,
                    name:"我是2号",
                },{
                    id:3,
                    name:"我是3号",
                },{
                    id:4,
                    name:"我是4号",
                },{
                    id:5,
                    name:"我是5号",
                }]
            }
        }
    }
</script>