Vue 3 + TypeScript + Vite 项目中，实现选中图片移动

在Vue 3 + TypeScript + Vite项目中实现图片移动，可以使用Vue的内置指令v-for结合v-draggable指令来实现。这里假设你已经实现了v-draggable指令。

首先，确保你已经安装并设置好了Vite与必要的Vue插件。

然后，创建一个Vue组件，例如ImageList.vue：

<template>
  <div>
    <div
      v-for="(image, index) in images"
      :key="index"
      class="draggable-item"
      v-draggable
      @dragstart="dragStart(index)"
      @dragend="dragEnd"
      @dragover.prevent
      @drop="dragDrop(index)"
      :style="{ backgroundImage: `url(${image})` }"
    ></div>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
 
export default defineComponent({
  setup() {
    const state = reactive({
      images: [
        'image1.jpg',
        'image2.jpg',
        // ... 更多图片路径
      ],
      draggedItem: null,
      draggedOverItem: null,
    });
 
    const dragStart = (index: number) => {
      state.draggedItem = index;
    };
 
    const dragEnd = () => {
      state.draggedItem = null;
      state.draggedOverItem = null;
    };
 
    const dragDrop = (index: number) => {
      if (state.draggedItem !== null && state.draggedOverItem !== index) {
        const temp = state.images[state.draggedItem];
        state.images.splice(state.draggedItem, 1);
        state.images.splice(index, 0, temp);
      }
      state.draggedOverItem = index;
    };
 
    return { ...toRefs(state), dragStart, dragEnd, dragDrop };
  },
});
</script>
 
<style scoped>
.draggable-item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-size: cover;
  border: 1px solid #000;
  cursor: move;
}
</style>

在这个组件中，images数组包含了所有待排序的图片路径。draggable-item类定义了图片展示的样式，并且应用了自定义指令v-draggable。dragStart、dragEnd和dragDrop方法用于处理拖拽事件，更新images数组的顺序。

请确保你已经定义了v-draggable指令的实现，这通常涉及监听dragover和drop事件来调整列表的顺序。

这个组件可以被添加到Vue应用的任何地方，以提供图片移动的功能。