vuedraggable的简单使用项目中即将用到拖拽功能，搜索出了vuedraggable组件，先探索测试下。兔子暂时

项目中即将用到拖拽功能，搜索出了vuedraggable组件，先探索测试下。

一、加载引入组件

1、初始化依赖包

npm install vuedraggable

2、在组件内引入并注册

import draggable from 'vuedraggable'     components:{        draggable,    },

二、组件使用

1、组件HTML部分

<draggable v-model="testList"            chosenClass="chosenClass" ghostClass="ghostClass" dragClass="dragClass"             draggable=".item" :move="move"            @start="start"  @change="change" @end="end"  class="testUl" tag="ul">            <li class="item" v-for="item in testList" :key="item.name">姓名{{item.name}},年龄{{item.age}}</li>        </draggable>

2、属性部分说明：

chosenClass：鼠标选中时的样式

ghostClass：鼠标拖拽时的样式

dragClass：鼠标拖拽过程中复制出来的dom的样式

draggable：可以拖拽的dom节点的class

move：拖拽移动过程中的方法，不知道为啥定义成了个属性值

start：开始拖拽的方法

change：数据改变的方法，兔子是这么理解的，不过数据改变好像没有在这里

end：拖拽完成

3、数据部分

data(){        return {            testList:[ //测试数据                {                    name:'张三',                    age: 19,                },                {                    name:'李四',                    age: 20,                },                {                    name:'王五',                    age: 20,                },                {                    name:'周六',                    age: 20,                },                {                    name:'陈七',                    age: 20,                },                {                    name:'朱八',                    age: 20,                }            ],            beforeMoveDataList:[],//拖拽开始前的数据列表；条件拖拽放置时使用，任意拖拽时无需使用        }    }

4、js部分及说明

methods: {        //开始拖拽        start(e){            window.console.log('start')            window.console.log(e)            window.console.log(this.testList)            //拖拽前将数据拷贝一份，方便条件拖拽时的回退            this.beforeMoveDataList = this.testList;            //或者预防浅拷贝可以使用...；实际上vuedraggable内容已经处理了，两种方式是一样的效果            // this.beforeMoveDataList = [...this.testList];        },        //移动中        move(e,originalEvent){
        //e =>整个拖拽对象
        //originalEvent 当前拖拽节点的信息            window.console.log('move')            window.console.log(e)            window.console.log(originalEvent)            window.console.log(this.testList)        },        //拖拽完成放置        change(e){//            window.console.log('change')            window.console.log(e)            //这里打印列表，发现数据已经被修改，目前兔子还没有找到数据修改的地方            window.console.log(this.beforeMoveDataList)            window.console.log(this.testList)            /**             * e={             *  moved:{             *       element:{             *           name:'张三',             *           age: 19,             *           ..... //其他属性             *       },             *       oldIndex:0,//拖拽开始前的下标             *       newIndex:3,//拖拽到要放置的下标             *   }             * }             * **/            //执行逻辑判断是否完成拖拽改变；我这里处理是如果“张三”紧跟在“王五”后面，就不允许放置            if(e.moved.element['name'] == '张三' && this.testList[e.moved.newIndex-1]['name'] == '王五'){                this.testList = [...this.beforeMoveDataList];//数据回退到拖拽前的状态            }        },        //拖拽结束        end(e){            window.console.log('end')            window.console.log(e)            window.console.log(this.testList)        },    }

5、css样式部分

.chosenClass{        color: blueviolet;    }    .ghostClass{        color:blue;        border: 1px dashed blue;    }    .dragClass{        color: red;    }

兔子暂时写到这里，后续有新发现再继续补充。