1. 将一个图标拖拽进入一个文件夹，要有拖拽的效果，图标跟随鼠标，鼠标挪到文件夹目录时，做停留判断，停留超过1.5s，则表示是挪动文件夹，否则是互换顺序。图标停留在文件夹目录时，文件夹目录要有选中效果，比如阴影边框效果。 2. 将一个图标拖拽到另一个图标之上，能自动形成一个文件夹目录，要有动画效果，并且两个图标均在文件夹之中附上代码用vue

1. 首先需要在组件中定义两个方法：一个用于拖拽开始，一个用于拖拽结束。

methods: {
  dragstart(event) {
    // 设置拖拽的数据类型和数据
    event.dataTransfer.setData('text/plain', 'icon');
    event.dataTransfer.effectAllowed = 'move';
    // 记录开始拖拽时的位置和文件夹
    this.dragging = true;
    this.draggedItem = { index: this.index, folder: this.folder };
    // 设置拖拽图标的样式
    event.target.style.opacity = '0.5';
  },
  dragend(event) {
    // 清除拖拽图标的样式
    event.target.style.opacity = '';
    // 判断是否需要挪动文件夹
    if (this.hoveredFolder && this.hoveredTime > 1500) {
      // 发送挪动文件夹的事件
      this.$emit('move-folder', this.draggedItem.folder, this.hoveredFolder);
    } else {
      // 发送互换顺序的事件
      this.$emit('swap-icons', this.draggedItem.index, this.hoveredIndex);
    }
    // 清除拖拽时的状态
    this.dragging = false;
    this.hoveredIndex = null;
    this.hoveredFolder = null;
    this.hoveredTime = null;
  }
}

2. 在图标的 HTML 元素中添加拖拽事件监听器，并在其中记录当前拖拽的状态和位置。

<div class="icon" 
  draggable="true"
  @dragstart="dragstart"
  @dragend="dragend"
  @dragenter="dragenter"
  @dragleave="dragleave">
  <!-- 图标的内容 -->
</div>

3. 在组件中定义两个方法：一个用于拖拽进入目标区域，一个用于拖拽离开目标区域。在这两个方法中，需要计算出当前拖拽的图标和目标文件夹的位置关系，并记录下来。

methods: {
  // ...
  dragenter(event) {
    // 判断是否为文件夹
    if (event.target.classList.contains('folder')) {
      // 计算拖拽图标和目标文件夹的位置关系
      const rect = event.target.getBoundingClientRect();
      const offsetY = event.clientY - rect.top;
      const folderIndex = parseInt(event.target.dataset.index);
      const hoverIndex = this.calculateHoverIndex(folderIndex, offsetY);
      // 更新拖拽图标和目标文件夹的状态
      this.hoveredIndex = hoverIndex;
      this.hoveredFolder = folderIndex;
      this.hoveredTime = new Date().getTime();
    }
  },
  dragleave(event) {
    // 判断离开的对象是否为文件夹
    if (event.target.classList.contains('folder')) {
      // 清除拖拽图标和目标文件夹的状态
      this.hoveredIndex = null;
      this.hoveredFolder = null;
      this.hoveredTime = null;
    }
  },
  calculateHoverIndex(folderIndex, offsetY) {
    // 计算文件夹内的图标数量和每个图标的高度
    const folder = this.items[folderIndex];
    const iconHeight = this.iconHeight;
    const iconCount = folder.icons.length;
    // 计算鼠标位置对应的图标索引
    const hoverIndex = Math.floor((offsetY + iconHeight / 2) / iconHeight);
    // 防止越界
    if (hoverIndex < 0) return 0;
    if (hoverIndex >= iconCount) return iconCount;
    return hoverIndex;
  }
}

4. 在组件中定义一个方法，用于处理挪动文件夹的事件。在该方法中，需要将原来的文件夹中的图标移动到目标文件夹中，并删除原来的文件夹。

methods: {
  // ...
  moveFolder(fromIndex, toIndex) {
    // 获取原来的文件夹和目标文件夹
    const fromFolder = this.items[fromIndex];
    const toFolder = this.items[toIndex];
    // 将原来文件夹中的图标移到目标文件夹中
    toFolder.icons.push(...fromFolder.icons);
    // 删除原来的文件夹
    this.items.splice(fromIndex, 1);
  }
}

5. 在组件中定义一个方法，用于处理互换顺序的事件。在该方法中，需要将拖拽图标与目标图标的位置互换。

methods: {
  // ...
  swapIcons(fromIndex, toIndex) {
    // 获取拖拽图标和目标图标
    const fromIcon = this.items[this.draggedItem.folder].icons[fromIndex];
    const toIcon = this.items[this.hoveredFolder].icons[toIndex];
    // 交换它们的位置
    this.$set(this.items[this.draggedItem.folder].icons, fromIndex, toIcon);
    this.$set(this.items[this.hoveredFolder].icons, toIndex, fromIcon);
  }
}

6. 在图标和文件夹的 CSS 样式中添加选中效果的样式。

.icon.selected {
  box-shadow: 0 0 0 3px #007aff;
}

.folder.selected {
  box-shadow: 0 0 0 3px #007aff;
}

7. 在图标和文件夹的 HTML 元素中添加选中效果的样式。

<div class="icon" 
  :class="{ 'selected': index === selectedIcon }"
  draggable="true"
  @dragstart="dragstart"
  @dragend="dragend"
  @dragenter="dragenter"
  @dragleave="dragleave">
  <!-- 图标的内容 -->
</div>

<div class="folder" 
  :class="{ 'selected': index === selectedFolder }"
  :data-index="index"
  @click="selectFolder(index)">
  <!-- 文件夹的内容 -->
</div>

8. 在组件中定义一个方法，用于选择文件夹。在该方法中，需要记录当前选择的文件夹，并清除已选择的图标。

methods: {
  // ...
  selectFolder(index) {
    // 清除已选择的图标
    this.selectedIcon = null;
    // 记录当前选择的文件夹
    this.selectedFolder = index;
  }
}

9. 在组件中定义一个计算属性，用于计算每个图标的高度。

computed: {
  iconHeight() {
    const icon = this.$refs.icon;
    return icon ? icon.getBoundingClientRect().height : 0;
  }
}

10. 在组件的模板中添加文件夹和图标的 HTML 元素，并设置拖拽的容器。

<template>
  <div class="container" 
    @dragover.prevent 
    @dragenter.prevent>
    <div class="folders">
      <div v-for="(folder, index) in items" 
        class="folder" 
        :class="{ 'selected': index === selectedFolder }"
        :data-index="index" 
        @click="selectFolder(index)">
        <!-- 文件夹的内容 -->
      </div>
    </div>
    <div class="icons">
      <div v-for="(folder, folderIndex) in items" 
        class="folder-icons"
        :class="{ 'dragging': dragging && folderIndex === draggedItem.folder }"
        :style="{ 'min-height': iconHeight * folder.icons.length + 'px' }">
        <div v-for="(icon, iconIndex) in folder.icons" 
          class="icon"
          :class="{ 'selected': folderIndex === selectedFolder && iconIndex === selectedIcon }"
          draggable="true"
          @dragstart="dragstart"
          @dragend="dragend"
          @dragenter="dragenter"
          @dragleave="dragleave"
          :style="{ 'transform': 'translateY(' + (hoveredIndex && folderIndex === hoveredFolder && iconIndex >= hoveredIndex ? '-1px' : '0') + ')' }">
          <!-- 图标的内容 -->
        </div>
      </div>
    </div>
  </div>
</template>