vue-draggable组件教程:可拖拽滑动控制多列表的组件（类似SAP日报功能）

介绍

draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作。

安装

1.首先，你需要有一个由vue-cil创建的vue项目，我这里使用我的一个开源前端进行展示，需要可自取。传送门

然后执行如下命令。

yarn add vuedraggable 或者 npm i -S vuedraggable

出现下图信息即为完成。

2.创建一个用于展示的页面并引入draggable组件。

1.import draggable from "vuedraggable"

2.components: { draggable },

具体如下：

<template>
    <div id="view">
        <div style="width: 100%;display: flex;align-items: center;justify-content: center"><h2>vue-draggable组件展示</h2></div>
        <div style="width: 100%;">

        </div>

    </div>
</template>

<script>
    import draggable from "vuedraggable"
    export default {
     
        name: "slidingList",
        components: {
     
            draggable
        },
        props: {
     
            menu: '',
        },
        data() {
     
            return {
     
            }
        },
        methods: {
     

        },
        mounted() {
     
        }
    }
</script>

<style scoped>
    #view {
     
        width: 100%;
        height: 100%;
        padding: 0px;
        margin: 0px;
        margin-top: 0.9375rem;
    }
</style>

3. 添加组件使用与样式

直接给出具体代码大家看一下吧：

<template>
    <div id="view">
        <div style="width: 100%;display: flex;align-items: center;justify-content: center"><h2>vue-draggable组件展示</h2></div>
        <div style="width: 100%;">
            <!--使用draggable组件-->
            <div class="itxst">
                <div class="col">
                    <div class="title" >蜀国</div>
                    <draggable v-model="arr1" group="site"  animation="300" dragClass="dragClass"  ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
                        <transition-group>
                            <div class="item" v-for="item in arr1" :key="item.id">{
     {
     item.name}}</div>
                        </transition-group>
                    </draggable>
                </div>
                <div  class="col">
                    <div class="title" >吴国</div>
                    <draggable v-model="arr2" group="site" animation="300" dragClass="dragClass"  ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
                        <transition-group>
                            <div class="item" v-for="item in arr2" :key="item.id">{
     {
     item.name}}</div>
                        </transition-group>
                    </draggable>
                </div>
                <div  class="col">
                    <div class="title" >魏国</div>
                    <draggable v-model="arr2" group="site" animation="300" dragClass="dragClass"  ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
                        <transition-group>
                            <div class="item" v-for="item in arr3" :key="item.id">{
     {
     item.name}}</div>
                        </transition-group>
                    </draggable>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import draggable from "vuedraggable"
    export default {
     
        name: "slidingList",
        components: {
     
            draggable
        },
        props: {
     
            menu: '',
        },
        data() {
     
            return {
     
                drag:false,
                //定义要被拖拽对象的数组
                arr1:[
                    {
     id:1,name:'张飞'},
                    {
     id:2,name:'诸葛亮'},
                    {
     id:3,name:'刘备'},
                    {
     id:4,name:'关羽'}
                ],
                arr2:[
                    {
     id:5,name:'曹操'},
                    {
     id:6,name:'曹丕'},
                    {
     id:7,name:'张辽'},
                    {
     id:8,name:'郭嘉'}
                ],
                arr3:[
                    {
     id:9,name:'孙权'},
                    {
     id:10,name:'周瑜'},
                    {
     id:11,name:'鲁肃'},
                    {
     id:12,name:'陆逊'}
                ]
            }
        },
        methods: {
     
            //开始拖拽事件
            onStart(){
     
                this.drag=true;
            },
            //拖拽结束事件
            onEnd() {
     
                this.drag=false;
            },
        },
        mounted() {
     
        }
    }
</script>

<style scoped>
    #view {
     
        width: 100%;
        height: 100%;
        padding: 0px;
        margin: 0px;
        margin-top: 0.9375rem;
    }

    /*定义要拖拽元素的样式*/
    .ghostClass{
     
        background-color:  blue !important;
    }
    .chosenClass{
     
        background-color: red !important;
        opacity: 1!important;
    }
    .dragClass{
     
        background-color: blueviolet !important;
        opacity: 1 !important;
        box-shadow:none !important;
        outline:none !important;
        background-image:none !important;
    }
    .itxst{
     
        margin: 10px;

    }
    .title{
     
        padding: 6px 12px;
    }
    .col{
     
        width: 40%;
        flex: 1;
        padding: 10px;
        border: solid 1px #eee;
        border-radius:5px ;
        float: left;
    }
    .col+.col{
     
        margin-left: 10px;
    }

    .item{
     
        padding: 6px 12px;
        margin: 0px 10px 0px 10px;
        border:  solid 1px #eee;
        background-color: #f1f1f1;
    }
    .item:hover{
     
        background-color: #fdfdfd;
        cursor: move;
    }
    .item+.item{
     
        border-top:none ;
        margin-top: 6px;
    }
</style>

具体样式：

展示效果

最后

有几个指定注意的地方需要跟大家说一下：

1. 如上列子中这三个数组中如果有一个被全部拖拽出去了。在想将其他的拖进来会比较困难，因为‘可选择空间’会非常小。
2. 该组件还有很多响应事件和功能没有分享到，大家可以去这个网站查看相关api。点击进入
3. 该组件支持的数组列是无上限的。如需要多个可以自行添加。
4. 该例子后期将会同步更新到我的GitHub。传送门

如果觉得有帮助的话给个免费的点赞吧，Thanks♪(･ω･)ﾉ