Vue3组件拖拽？

最新推荐文章于 2024-05-06 09:32:26 发布

CV程序

最新推荐文章于 2024-05-06 09:32:26 发布

阅读量1k

点赞数 24

文章标签： vue.js javascript 前端开发语言

本文链接：https://blog.csdn.net/2301_79004023/article/details/136766373

版权

本文介绍了如何在Vue3中使用VueDraggable-plus组件实现拖拽功能，包括基本使用如开始、暂停和禁用操作，以及组件的相关属性设置和事件处理。

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

网址: Transition | vue-draggable-plusvue3拖拽排序组件https://alfred-skyblue.github.io/vue-draggable-plus/demo/transition/

基础使用实例

<template>
    <!-- 点击按钮开始拖动 -->
    <button @click="start">start</button>
    <!-- 点击按钮暂停拖动 -->
    <button @click="pause">pause</button>
    <!-- 点击按钮禁用拖动 -->
    <button @click="disabled = true">disabled</button>
    <div class="flex">
        <!-- 使用VueDraggable组件实现拖拽功能，设置相关属性 -->
        <VueDraggable ref="VueDraggableRed" v-model="list" :disabled="disabled" :animation="150" ghostClass="ghost"
            class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded" @start="onStart"
            @update="onUpdate">
            <!-- 循环渲染拖拽元素 -->
            <div v-for="item in list" :key="item.id" class="cursor-move h-30 bg-gray-500/5 rounded p-3 cursor-move">
                {{ item.name }}
            </div>
        </VueDraggable>
        <!-- 预览列表组件 -->
        <preview-list :list="list" />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { type UseDraggableReturn, VueDraggable } from 'vue-draggable-plus'
const VueDraggableRed = ref<UseDraggableReturn>()
const disabled = ref<boolean>(false)
const list = ref([
    {
        name: 'Joao',
        id: 1
    },
    {
        name: 'Jean',
        id: 2
    },
    {
        name: 'Johanna',
        id: 3
    },
    {
        name: 'Juan',
        id: 4
    }
])

// 暂停拖动操作
const pause = () => {
    VueDraggableRed.value?.pause()
}

// 开始拖动操作
const start = () => {
    VueDraggableRed.value?.start()
}

// 拖动开始事件
const onStart = () => {
    console.log('start')
}

// 拖动更新事件
const onUpdate = () => {
    console.log('update')
}
</script>

<style scoped lang="scss">
.ghost {
    opacity: 0.5;
    background: #c8ebfb;
}
</style>

其他细节可去官网查看文档

VueDraggablePlus | 支持 Vue2 和 Vue3 的拖拽组件