Vue.Draggable的使用

Vue.Draggable的使用

后台要做拖拽配置移动端页面的功能，结合网上对Vue.Draggable的介绍和本人在项目中搭建的心得写这篇文章，只说简单单个/多个列表拖拽用法，具体需求具体对待

一个列表内部拖拽

<!-- changeList Array类型，子元素循环这个 -->
<draggable
    element="div"
    v-model="changeList"
    v-bind="getChangeOptions()"
    :move="onMove"
>
    <div
        class="changeListItem"
        v-for="(item,index) in changeList"
        :key="index"
    >
    </div>
</draggable>
<script>
methods: {
    getChangeOptions() {
        return {
            animation: 0,   //动画时间
            group: "description", //分组用的，可以是对象/字符串
            ghostClass: "changeGhost",//拖拽中的影子
        };
    },
    onMove({ relatedContext, draggedContext }){
    	//注意@move不好使，用:move
    	const relatedElement = relatedContext.element;//relatedElement拖入的时候上下文元素
   	const draggedElement = draggedContext.element;//draggedElement拖动的元素
    	return false;//控制拖拽失败
    	return true;//控制拖拽成功
    },
}
</script>

当2个/多个列表拖拽

<!-- commonList（左）  changeList（右） 2个列表需求是左边拖到右边，左侧不动（相当于复制到右侧）-->
<draggable
    element="div"
    v-model="commonList"
    v-bind="getCommonOptions()"
    :move="onMove"
    @remove="onRemove"
>
    <div
        class="enumBoxItem"
        v-for="(item,index) in commonList"
        :key="item.type+‘‘+index"
    >
    {{item}}
    </div>
</draggable>
<draggable
    element="div"
    v-model="changeList"
    v-bind="getChangeOptions()"
    :move="onMove"
    @update="onUpdate"
>
    <div
        class="changeListItem"
        v-for="(item,index) in changeList"
        :key="index"
    >
    {{item}}
    </div>
</draggable>
<script>
methods: {
    getCommonOptions() {
	return {
            animation: 0,
            group: {
               name: "description",//要与下面的group名字一致才能互相拖拽
               pull: "clone" //复制，不加这个和下面的group一样就是都能互相拖拽
            },
            ghostClass: "commonGhost"
        };
    }
    getChangeOptions() {
        return {
           animation: 0,   //动画时间
           group: "description", //分组用的，可以是对象/字符串
           ghostClass: "changeGhost",//拖拽中的影子
        };
    },
    onMove({ relatedContext, draggedContext }){
    	const relatedElement = relatedContext.element;//relatedElement拖入的时候上下文元素
        const draggedElement = draggedContext.element;//draggedElement拖动的元素
    	//在这里通过监听draggedElement对象的属性来控制拖拽成功/失败来进行是否单项(自由发挥可随便拓展)
    },
    onRemove(){
    	//当从左拖到右时回调事件，拖拽成功执行一次
    },
    onUpdate(){
    	//当右侧列表中内部拖拽执行事件
    }
}
</script>

小结

其他属性/事件推荐查看下面地址，有时间完善下本文章
地址1
地址2
官方文档

Vue.Draggable的使用

原文：https://www.cnblogs.com/cnyanqun/p/13215145.html