vuedraggable 的简单使用

本文介绍了如何在Vue项目中安装和使用vuedraggable库来创建拖放效果。通过npm或yarn安装后,在组件中导入并注册该库,设置属性如delay、group和animation,实现列表项的拖动以及拖动状态的显示。示例代码展示了在两个列表间进行拖放操作的实现。
摘要由CSDN通过智能技术生成

 一、安装vuedraggable

npm install vuedraggable

yarn add vuedraggable

二、引入

//在需要使用的页面导入
import draggable from "vuedraggable";

//组件注册
     components: {
       draggable
    }

三、效果示例

拖动前

 拖动时

 拖动后

 

<template>
    <div class="home">
        <div class="drag">{{ drag ? 'dragging' : 'dragged' }}</div>
        <div>list1</div>
        <!-- delay:响应时间  animation:过渡时间  group:组名(组名相同可多列拖动) -->
        <draggable delay="1000" v-model="array" @start="onStart" chosen-class="chosen" force-fallback="true" group="group"
            @end="onEnd" class="Li" animation="1000">
            <transition-group class="list">
                <div class="item" v-for="(item, index) of array" :key="item.state + '_' + index">{{ item.name }}</div>
            </transition-group>
        </draggable>
        <div>list2</div>
        <draggable delay="1000" v-model="array1" @start="onStart" chosen-class="chosen" animation="1000"
            force-fallback="true" group="group" @end="onEnd" class="Li">
            <transition-group class="list">
                <div class="item" v-for="(item, index) of array1" :key="item.state + '_' + index">{{ item.name }}</div>
            </transition-group>
        </draggable>
    </div>
</template>
  
<script>
import draggable from "vuedraggable";
export default {
    name: "HomeView",
    components: {
        draggable
    },
    data() {
        return {
            // 是否正在拖拽
            drag: false,
            array: [
                { group: "list", name: "list1", state: 1 },
                { group: "list", name: "list2", state: 2 },
                { group: "list", name: "list3", state: 3 },
                { group: "list", name: "list4", state: 4 }
            ],
            array1: [
                { group: "list", name: "list5", state: 5 },
                { group: "list", name: "list6", state: 6 },
                { group: "list", name: "list7", state: 7 },
                { group: "list", name: "list8", state: 8 }
            ]
        };
    },
    methods: {
        onStart() {
            this.drag = true;
        },
        onEnd() {
            this.drag = false;
        }
    }
};
</script>
<style lang="scss" scoped>
.home {
    width: 55vw;
    margin: auto;

    .chosen {
        background: aquamarine;
        color: rgba(0, 0, 0, .3);
    }

    .drag {
        width: 50vw;
        text-align: center;
        padding-top: 50px;
    }

    .Li {
        display: flex;

        .list {
            width: 50vw;
            display: flex;

            .item {
                width: 50%;
                padding: 30px 0;
                border: 1px solid #000;
                margin: 15px;
                background: blanchedalmond;
            }

            text-align: center;

        }
    }
}</style>

vue.draggable中文文档 - itxst.com

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值