Q7: 为什么添加组件到画布使用了 H5 原始拖曳 API，调整画布题目和大纲顺序使用了 vuedraggable？两者有什么特别的考量吗？

<!-- src/components/Editor/QuestionTypeCom.vue -->
<template>
  <div
    @click="addQuestionCom"
    draggable="true"
    @dragstart="handleDragStart"
    @dragend="handleDragEnd"
    class="question-type-com-container pointer"
    :class="{ dragging: isDragging }"
  >
    {{ name }}
  </div>
</template>

<script setup lang="ts">
// 拖拽开始事件
const handleDragStart = (event: DragEvent) => {
  isDragging.value = true;
  // 将组件类型信息存储到拖拽数据中，用于在拖拽结束时（drop）获取组件类型信息
  if (event.dataTransfer) {
    event.dataTransfer.setData(
      'application/json',
      JSON.stringify({
        type: props.type,
        name: props.name,
      }),
    );
    // 设置拖曳效果
    event.dataTransfer.effectAllowed = 'copy';
  }
};

// 拖拽结束事件
const handleDragEnd = () => {
  isDragging.value = false;
};
</script>

<!-- src/views/EditorView/Center.vue -->
<template>
  <div
    class="center-container"
    ref="centerContainerRef"
    @drop="handleDrop"
    @dragover="handleDragOver"
    @dragenter="handleDragEnter"
    @dragleave="handleDragLeave"
    :class="{ 'drag-over': isDragOver }"
  >
    <!-- vuedraggable 用于内部排序 -->
    <draggable v-model="editorStore.questionComs" item-key="id" @start="startDrag">
      <!-- 组件列表 -->
    </draggable>
  </div>
</template>

<script setup lang="ts">
// 处理拖拽进入
const handleDragEnter = (event: DragEvent) => {
  event.preventDefault();
  isDragOver.value = true;
};

// 处理拖拽悬停
const handleDragOver = (event: DragEvent) => {
  // 立即阻止默认行为，确保 drop 事件能正常触发
  event.preventDefault();

  // 节流设置拖拽效果，避免频繁操作
  if (event.dataTransfer) {
    setDragEffect(event.dataTransfer);
  }
};

// 处理拖拽离开
const handleDragLeave = (event: DragEvent) => {
  // 只有当离开整个容器时才设置为false
  if (!centerContainerRef.value?.contains(event.relatedTarget as Node)) {
    isDragOver.value = false;
  }
};

// 处理拖拽放置
const handleDrop = (event: DragEvent) => {
  event.preventDefault();
  isDragOver.value = false;

  if (event.dataTransfer) {
    try {
      const data = JSON.parse(event.dataTransfer.getData('application/json'));
      const questionType = data.type as MaterialComType;

      if (!questionType) {
        console.warn('无效的组件类型');
        return;
      }

      // 根据问题类型获取问题组件的默认状态
      const defaultStatus = defaultStatusMap[questionType]() as SchemaType;
      // 更新问题组件的初始状态
      updateInitStatus(defaultStatus, questionType);
      // 添加状态到仓库
      editorStore.addQuestionCom(defaultStatus);
      // 滚动到底部
      eventBus.emit('scrollToBottom');

      ElMessage.success(`已添加${data.name}组件`);
    } catch (error) {
      console.error('解析拖拽数据失败:', error);
      ElMessage.error('添加组件失败');
    }
  }
};
</script>

<!-- src/views/EditorView/Center.vue -->
<draggable v-model="editorStore.questionComs" item-key="id" @start="startDrag">
  <template #item="{ element, index }">
    <div
      class="content mb-10 relative"
      :class="{ active: editorStore.currentQuestionIndex === index }"
      @click="showEditor(index)"
      :key="element.id"
    >
      <component
        :is="element.type"
        :status="element.status"
        :serialNum="questionSerialNumber[index]"
      />
    </div>
  </template>
</draggable>

<!-- src/views/EditorView/LeftSide/Outline.vue -->
<draggable v-model="editorStore.questionComs" item-key="id" @start="startDrag">
  <template #item="{ element, index }">
    <div class="mb-10" v-show="isQuestionType(element.name)">
      <div
        class="item"
        @click="handleClick(index)"
        :class="{ active: editorStore.currentQuestionIndex === index }"
      >
        {{ questionSerialNumber[index] }}.{{
          element.status.title.status.length > 10
            ? element.status.title.status.slice(0, 10) + '...'
            : element.status.title.status
        }}
      </div>
    </div>
  </template>
</draggable>