当前位置：首页 > news >正文

vue3实际案例分析：展示Vue拖拽功能的实现和效果

news 来源：原创 2025/6/28 18:32:55

在现代前端开发中，交互式的用户界面是提升用户体验的关键因素之一。Vue.js，作为一个渐进式JavaScript框架，提供了灵活的组件系统和响应式数据绑定，使得实现复杂的用户交互变得简单。拖拽功能是其中一个常见的交互模式，它允许用户通过拖动界面上的元素来完成特定的操作，比如重新排序、移动位置等。

在Vue中实现拖拽图片元素，不仅可以增强应用的互动性，还可以为用户提供直观的操作反馈。本文将探讨如何在Vue应用中实现拖拽图片的功能，包括基本的拖拽逻辑、事件处理、以及如何优化拖拽体验。

下面的经测试，不需要使用 @vueuse/core 包
在使用 @vueuse/core 包中的 useDrag 功能时遇到了问题。实际上，@vueuse/core 并没有提供名为 useDrag 的导出。您可能想要使用的是 useDraggable 函数，它允许您创建可拖拽的元素

以下是如何在 Vue 3 中使用


A.vue
<template><el-image style="width: 100px; height: 100px"v-for="(src, index) in imageSources":key="index":src="src":alt="`Image ${index}`"fit="fill"draggable="true"dragstart="(event) => dragStart(event, src)"/>
</template><script setup lang="ts">import { ref, onMounted,getCurrentInstance } from 'vue'const router = useRouter();
const isCollapse = ref(true)// 定义一个图片数组
const imageSources = ref(['/assets/imgs/0e5bee72.jpg','/assets/imgs/6ae8.jpg',// ...其他图片路径
]);// 当前被拖动的图片地址
const currentDragImageSrc = ref('');const imageRef = ref<HTMLElement | null>(null);const dragStart = (event: DragEvent, imageSrc: string) => {// event.dataTransfer?.setData('text/plain', imageSrc);// currentDragImageSrc.value = imageSrc; // 设置当前被拖动的图片地址if (event.dataTransfer) {event.dataTransfer.effectAllowed = 'copy'event.dataTransfer.setData('text/plain', imageSrc)}};</script>

B.vue

<template><div class="pagebody"><div class="checkbox-item"><div class="row"><label>加工的视频</label><div ref="dropArea" @dragover.prevent @drop="drop"><el-image style="width: 100px; height: 100px":src="imageSrc"fit="fill"/></div></div></div></div></template><script setup lang="ts">
import { ref } from 'vue'
import { ElSelect, ElOption } from 'element-plus';import { useDraggable  } from '@vueuse/core';
const imageSrc = ref('/assets/imgs/3cc5.jpg');
const dropArea = ref<HTMLElement | null>(null);const checked  =ref(false)
const value =ref()// 监听拖拽结束事件，更新B图片的地址
const drop = (event: DragEvent) => {event.preventDefault()const data = event.dataTransfer?.getData('text/plain')if (data) {// 处理图片地址，例如更新状态或调用方法console.log('Dropped image source:', data)imageSrc.value = data;// 这里可以设置当前被拖动的图片地址，或者执行其他逻辑}}</script>

当A图片拖拽结束时，我们更新B图片的地址为A图片的地址。请注意，您需要根据实际情况调整图片的路径和样式。
效果图：
在这里插入图片描述

相关文章：