vuedraggable 的简单使用

最新推荐文章于 2024-09-13 21:32:20 发布

Carlos265

最新推荐文章于 2024-09-13 21:32:20 发布

阅读量677

点赞数

分类专栏： vuedraggable 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_60269631/article/details/130687004

版权

vuedraggable 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在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