vuedraggable

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

安装：npm install vuedraggable
　　　yarn add vuedraggable

// 页面使用

　　　　
{{i}}

　

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

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

    　　　　

                

                
{{i}}
            
    　                           

  自定义样式：
 需要加!important才能生效，并把forceFallback属性设置成true  ghostClass:'ghostClass';拖拽中占位的元素的类名（一般设置opacity:1）达到空出该位置的视觉效果  dragClass:'dragClass';元素拖拽中的类名