处理开始拖拽时的数据

src/views/chart/components/ContentCharts/components/ItemBox/index.vue

@@ -1,6 +1,13 @@
 <template>
+  <div class="go-content-charts-item-box">
     <!-- 每一项组件的渲染 -->
-  <div class="item-box" v-for="(item, index) in menuOptions" :key="index">
+    <div
+      class="item-box"
+      v-for="(item, index) in menuOptions"
+      :key="index"
+      draggable
+      @dragstart="handleDragStart($event, item)"
+    >
       <div class="list-header">
         <AppleControlBtn :mini="true" :disabled="true"></AppleControlBtn>
         <n-text class="list-header-text" depth="3">{{ item.title }}</n-text>
@@ -15,6 +22,7 @@
         />
       </div>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -26,6 +34,14 @@ defineProps({
     default: () => []
   }
 })
+
+// 拖拽处理
+const handleDragStart = (e: DragEvent, item: any) => {
+  if (e.dataTransfer instanceof Object && e.target instanceof Object) {
+    e.dataTransfer.setData('chartName', item.key)
+    e.dataTransfer.setData('chartNode', item.node)
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -33,7 +49,8 @@ defineProps({
 $itemWidth: 86%;
 /* 内容高度 */
 $centerHeight: 100px;
-.item-box {
+@include go('content-charts-item-box') {
+  .item-box {
     margin: 0 7%;
     margin-bottom: 15px;
     width: $itemWidth;
@@ -70,5 +87,6 @@ $centerHeight: 100px;
         @extend .go-transition;
       }
     }
+  }
 }
 </style>