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

在现代前端开发中，交互式的用户界面是提升用户体验的关键因素之一。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图片的地址。请注意，您需要根据实际情况调整图片的路径和样式。
效果图：

原文地址：https://blog.csdn.net/ylong52/article/details/144430859

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！