vuedraggable

官方文档：https://www.npmjs.com/package/vuedraggable
中文文档：http://www.itxst.com/vue-draggable/tutorial.html

安装：npm install vuedraggable
　　　yarn add vuedraggable

// 页面使用

<draggable :list="list" >
　　　　<div v-for="(i,index) in list" :key=index>{{i}}</div>
　</draggable>

import draggable from "vuedraggable"
export default {
    components: {  draggable  },
    data() {
        return {
            list:[
                {name:'aaa',id:1,},
                {name:'bbb',id:2,}
                ]
        };
    }
}

handle是拖拽的把手，表示拖拽元素指定可拖拽的部分：
正常情况下拖拽元素的整体都是可拖拽的，加了handle之后，只能指定的地方可以拖拽了，其他地方不能进行拖拽：

<draggable :list="list" handle=".icon">
    　　　　<div v-for="(i,index) in list" :key=index>
                <div class="icon"></div>
                <div>{{i}}</div>
            </div>
    　   </draggable>                        

 

自定义样式：
 需要加!important才能生效，并把forceFallback属性设置成true

 ghostClass:'ghostClass';拖拽中占位的元素的类名（一般设置opacity:1）达到空出该位置的视觉效果

 dragClass:'dragClass';元素拖拽中的类名