vue基础15拖拽

1.安装插件:npm install awe-dnd --save

2.引入方法，在mainjs文件中

import VueDND from 'awe-dnd'

 

Vue.use(VueDND)

3.使用方法

<template>
    <div>
　　　　　<!--v-dragging中item:当前对象，list指当前对象所在的数组，group指拖拽的组名(唯一)-->
        <div class="color-item" v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }" :key="color.text">
            {{color.text}}
        </div>
    </div>
</template>
<script>
    export default{
        name:"index",
        data(){
            return{
                colors: [{
                    text: "Aquamarine"
                }, {
                    text: "Hotpink"
                }, {
                    text: "Gold"
                }, {
                    text: "Crimson"
                }, {
                    text: "Blueviolet"
                }, {
                    text: "Lightblue"
                }, {
                    text: "Cornflowerblue"
                }, {
                    text: "Skyblue"
                }, {
                    text: "Burlywood"
                }]
            }
        },
        methods:{
                
            }
        }
</script>
            
<style>
            
</style>