实现拖拽

smsb-plus-ui/src/views/smsb/itemProgram/EditProgram.vue

@@ -28,17 +28,20 @@
           <CanvasBoard v-if="item.type === 'canvas'" :width="item.width" :height="item.height" :bg="item.bg"
             :scale="canvasScale" @click.stop="selectComponent(item)"
             :class="{ selected: selectedComponent === item }" />
-        </template>
-        <template v-for="item in editorContent.elements.sort((a, b) => a.depth - b.depth)"
-          :key="'text-' + item.depth + '-' + item.type">
-          <TextBoard v-if="item.type === 'text'" :text="item.text" :color="item.color" :font-size="item.fontSize"
-            :font-weight="item.fontWeight" :align="item.align" :style="{
-              position: 'absolute',
-              left: (item.x || 0) + 'px',
-              top: (item.y || 0) + 'px',
-              width: (item.width || 200) + 'px',
-              height: (item.height || 40) + 'px'
-            }" @click.stop="selectComponent(item)" :class="{ selected: selectedComponent === item }" />
+          <div v-else :style="{
+            position: 'absolute',
+            left: (item.x || 0) + 'px',
+            top: (item.y || 0) + 'px',
+            width: (item.width || 200) + 'px',
+            height: (item.height || 40) + 'px',
+            cursor: draggingId === item.depth ? 'grabbing' : 'move',
+            zIndex: 10
+          }" @mousedown="onElementMouseDown($event, item)">
+            <TextBoard v-if="item.type === 'text'" :text="item.text" :color="item.color" :font-size="item.fontSize"
+              :font-weight="item.fontWeight" :align="item.align" @click.stop="selectComponent(item)"
+              :class="{ selected: selectedComponent === item }" />
+            <!-- 未来可扩展更多类型 -->
+          </div>
         </template>
       </div>
       <el-button type="primary" class="save-btn" @click="handleSave">保存</el-button>
@@ -199,6 +202,37 @@ const editorContent = ref({ elements: [] });
 const editorCanvasRef = ref<HTMLElement | null>(null);
 const dragComponentType = ref<string | null>(null);
 
+const draggingId = ref<number | null>(null);
+let dragStart = { x: 0, y: 0, offsetX: 0, offsetY: 0 };
+
+function onElementMouseDown(e: MouseEvent, item: any) {
+  e.stopPropagation();
+  draggingId.value = item.depth;
+  dragStart = {
+    x: e.clientX,
+    y: e.clientY,
+    offsetX: item.x || 0,
+    offsetY: item.y || 0
+  };
+  document.addEventListener('mousemove', onElementMouseMove);
+  document.addEventListener('mouseup', onElementMouseUp);
+}
+
+function onElementMouseMove(e: MouseEvent) {
+  if (draggingId.value === null) return;
+  const item = editorContent.value.elements.find((el) => el.depth === draggingId.value);
+  if (!item) return;
+  const scale = canvasScale.value || 1;
+  item.x = dragStart.offsetX + (e.clientX - dragStart.x) / scale;
+  item.y = dragStart.offsetY + (e.clientY - dragStart.y) / scale;
+}
+
+function onElementMouseUp() {
+  draggingId.value = null;
+  document.removeEventListener('mousemove', onElementMouseMove);
+  document.removeEventListener('mouseup', onElementMouseUp);
+}
+
 function onToolbarDragStart(type: string) {
   dragComponentType.value = type;
 }