50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop（拖拽占用组件）

📅 我们继续 50 个小项目挑战！—— DragNDrop组件

仓库地址：https://github.com/SunACong/50-vue-projects

项目预览地址：https://50-vue-projects.vercel.app/

使用 Vue 3 的 Composition API 和 <script setup> 语法结合 TailwindCSS 构建一个支持拖拽交互的图片拖放组件。该组件允许用户将一张图片从一个容器拖动并释放到另一个“空位”中，并带有视觉反馈（如悬停高亮、背景变化等）。

🎯 组件目标

• 创建多个“空位”容器
• 默认展示一张可拖动的图片
• 支持拖拽交互并投放到任意空位
• 投放后更新对应位置的图片状态
• 拖拽过程中提供视觉反馈（如悬停样式）
• 使用 TailwindCSS 快速构建现代 UI 界面

⚙️ 技术实现点

🧱 组件实现

模板结构 <template>

<template>
    <div class="flex h-screen items-center justify-center overflow-hidden bg-sky-500">
        <!-- 多个空位容器 -->
        <div
            v-for="(empty, index) in empties"
            :key="index"
            :class="[
                'm-2 h-36 w-36 border-4 border-black bg-white',
                isHovered[index] && 'border-dashed border-black bg-gray-800',
            ]"
            @dragover.prevent="dragOver"
            @dragenter.prevent="dragEnter(index)" 
            @dragleave="dragLeave(index)"
            @drop="dragDrop(index)">
            
            <!-- 当前图片所在的容器 -->
            <div
                v-if="index === filledIndex"
                class="h-full w-full cursor-pointer bg-cover"
                :style="{ backgroundImage: `url(${imageUrls[index]})` }"
                draggable="true"
                @dragstart="dragStart"
                @dragend="dragEnd"></div>
        </div>
    </div>
</template>

脚本逻辑 <script setup>

<script setup>
import { ref } from 'vue'

const filledIndex = ref(0)
const isHovered = ref(Array(5).fill(false))

// 用于循环生成 5 个空位容器
const empties = Array.from({ length: 5 }, (_, index) => index)

// 图片地址数组
const imageUrls = [
    'https://picsum.photos/id/10/150/150',
    'https://picsum.photos/id/11/150/150',
    'https://picsum.photos/id/12/150/150',
    'https://picsum.photos/id/13/150/150',
    'https://picsum.photos/id/14/150/150',
]

// 拖拽开始
const dragStart = () => {
    // 可添加 hold 效果或数据存储
}

// 拖拽结束
const dragEnd = () => {
    // 可添加恢复效果
}

// 鼠标悬停时触发
const dragOver = () => {}

// 进入容器时触发
const dragEnter = (index) => {
    isHovered.value[index] = true
}

// 离开容器时触发
const dragLeave = (index) => {
    isHovered.value[index] = false
}

// 投放操作
const dragDrop = (index) => {
    filledIndex.value = index
    isHovered.value = Array(5).fill(false)
}
</script>

自定义样式 <style scoped>

<style scoped>
[draggable='true'] {
    transition: all 0.2s ease;
}
</style>

🔍 重点效果实现

✅ 拖拽交互逻辑详解

1. 拖拽开始：dragStart

当用户点击并开始拖动图片时，会触发 dragStart 方法。你可以在这里做一些准备操作，例如记录当前拖动的数据。

2. 拖拽进入容器：dragEnter(index)

当鼠标带着元素进入某个容器时，我们通过传入 index 设置该容器的悬停状态为 true，从而激活其高亮样式。

3. 拖拽离开容器：dragLeave(index)

当鼠标离开容器时，设置该容器的悬停状态为 false，恢复默认样式。

4. 投放完成：dragDrop(index)

这是整个拖拽流程的核心，它负责更新 filledIndex，将图片移动到新的容器，并重置所有悬停状态。

💡 视觉反馈机制

我们使用了一个布尔数组 isHovered 来保存每个容器是否被悬停：

const isHovered = ref(Array(5).fill(false))

并通过 v-if="index === filledIndex" 判断哪个容器应该显示图片，其他则为空白容器。

TailwindCSS 中根据这个状态来切换样式：

:class="[
    'm-2 h-36 w-36 border-4 border-black bg-white',
    isHovered[index] && 'border-dashed border-black bg-gray-800',
]"

🖼️ 图片动态加载

使用了 :style 来动态设置背景图：

:style="{ backgroundImage: `url(${imageUrls[index]})` }"

每张图片都来自 Picsum Photos 提供的随机图片服务，确保每次运行都能看到不同的内容。

🎨 TailwindCSS 样式重点讲解

📁 常量定义 + 组件路由

constants/index.js 添加组件预览常量：

{
        id: 21,
        title: 'Drag N Drop',
        image: 'https://50projects50days.com/img/projects-img/21-drag-n-drop.png',
        link: 'DragNDrop',
    },

router/index.js 中添加路由选项：

{
        path: '/DragNDrop',
        name: 'DragNDrop',
        component: () => import('@/projects/DragNDrop.vue'),
    },

📁 扩展功能建议

进一步扩展的功能推荐：

• ✅ 支持多张图片同时拖动
• ✅ 支持图片预览拖拽（不立即改变原图位置）
• ✅ 拖拽时高亮目标容器边界
• ✅ 支持触摸设备拖拽交互（移动端适配）
• ✅ 封装为可复用组件（支持 props 传入图片列表）

🏁 总结

👉 下一篇，我们将完成DrawApp组件，创建一个画板具有调节画笔粗细的功能，并且能够一键清除画板上的内容。🚀