VUE 左右拖拽

最新推荐文章于 2024-07-04 11:09:33 发布

weixin_37266304

最新推荐文章于 2024-07-04 11:09:33 发布

阅读量410

点赞数

文章标签： vue.js 前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_37266304/article/details/128860791

版权

该文章展示了如何在Vue.js应用中集成vuedraggable库，创建两个可拖动的列表，允许用户在它们之间重新排序元素。通过引入组件，设置数据和事件处理，以及定义拖放组以控制元素移动，实现了列表的拖放功能。

摘要由CSDN通过智能技术生成

第一步：npm i vuedraggable -S

第二步：

<template>
    <div>
        <div>
            <div class="col">
                <draggable v-model="arr1" :group="groupA" :disabled="disabled" animation="300" @start="onStart"
                    @end="onEnd">
                    <transition-group :style="style">
                        <div class="item"  v-for="item in arr1" :key="item.id" >{{item.name}}</div>
                    </transition-group>
                </draggable>
            </div>
            <div class="col">
                <draggable v-model="arr2" :group="groupB" :disabled="disabled" animation="300" @start="onStart"
                    @end="onEnd">
                    <transition-group :style="style">
                        <div class="item"   v-for="item in arr2" :key="item.id" >{{item.name}}</div>
                    </transition-group>
                </draggable>
            </div>
        </div>
    </div>
</template>
<script>
    //导入draggable组件
    import draggable from 'vuedraggable'
    export default {
        //注册draggable组件
        components: {
            draggable
        },
        data() {
            return {
                style: "min-height:120px;display: block;",
                arr1: [{
                        people: 'cn',
                        id: 1,
                        name: '序号1'
                    },
                    {
                        people: 'cn',
                        id: 2,
                        name: '序号2'
                    },
                    {
                        people: 'cn',
                        id: 3,
                        name: '序号3'
                    },
                    {
                        people: 'us',
                        id: 4,
                        name: '序号4'
                    }
                ],
                arr2: [],
                disabled: false,
                //定义要被拖拽对象的数组
                groupA: {
                    name: "itxst",
                    // pull: "clone",//原数组不变
                    put: true, //可以拖出
                },
                groupB: {
                    name: "itxst",
                    put: true,
                }
            }
        },
        methods: {
            onStart() {
                this.drag = true;
            },
            //开始拖拽事件
            onStart() {
                this.drag = true;
            },
            //拖拽结束事件
            onEnd() {
                this.drag = false;
            },
        },
    };
</script>
<style scoped>
    /*定义要拖拽元素的样式*/
    .itxst {
        margin: 10px;
    }

    .col {
        width: 40%;
        height: 500px;
        flex: 1;
        padding: 10px;
        border: solid 1px #55aa00;
        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>