update：html元素拖动匹配

src/stageAchievements/imageNode.vue

@@ -2,10 +2,10 @@
     <div class="common-layout">
         <div class="layout-container">
             <div id="PaletteDiv" class="layout-aside">
-                 <div class="svg_class" draggable="true" @dragstart="dragstart">
-                    <img src="./pid_node/渣池.svg">
+                 <div id="svg_zhaChi" class="svg_class" draggable="true" @dragstart="dragstart">
+                    <img id="svg_zhaChi" src="./pid_node/渣池.svg">
                  </div>
-                 <div style="background-color: aqua; width: 100px; height: 100px; margin-left: auto; margin-right: auto;" draggable="true" @dragstart="dragstart">html元素</div>
+                 <div id="html" style="background-color: aqua; width: 100px; height: 100px; margin-left: auto; margin-right: auto;" draggable="true" @dragstart="dragstart">html元素</div>
             </div>
             <div id="diagramDiv" class="layout-main" @dragover="event => event.preventDefault()"
                 @dragenter="event => event.preventDefault()" @drop="drop"></div>
@@ -68,7 +68,7 @@ function initDiagram() {
             new go.Binding("location", "loc"),
             new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),  // 进行元素位置信息的绑定
             // 端口模板
-            new go.Binding('itemArray', 'markArray'), { 
+            new go.Binding('itemArray', 'portArray'), { 
                 itemTemplate: $(go.Panel,
                 {
                     portId: "Top",
@@ -192,7 +192,7 @@ function initDiagram() {
         },
         new go.Binding("location", "loc"),
         new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),  // 进行元素位置信息的绑定
-        new go.Binding('itemArray', 'markArray'), { 
+        new go.Binding('itemArray', 'portArray'), { 
                 itemTemplate: $(go.Panel,
                 {
                     portId: "Top",
@@ -417,8 +417,8 @@ function initDiagram() {
 
 
     const nodeDataArray = [
-        { key: "add1", color: "lightyellow", loc: new go.Point(-150, 200), markArray: [{portId: "top0", portKey: "top"}, {portId: "left0", portKey: "left"}, {portId: "right0", portKey: "right"}, {portId: "bottom0", portKey: "bottom"}] },
-        { key: "add2", color: "lightblue", loc: new go.Point(100, 50), category: "zhaChi", markArray: [{portId: "bottom0", portKey: "bottom"}] },
+        { key: "add1", color: "lightyellow", loc: new go.Point(-150, 200), portArray: [{portId: "top0", portKey: "top"}, {portId: "left0", portKey: "left"}, {portId: "right0", portKey: "right"}, {portId: "bottom0", portKey: "bottom"}] },
+        { key: "add2", color: "lightblue", loc: new go.Point(100, 50), category: "zhaChi", portArray: [{portId: "bottom0", portKey: "bottom"}] },
     ];
     const linkDataArray = [
         { from: "add1", fromPort: "top0", to: "add2", toPort: "bottom0", text: "1->2" },
@@ -449,6 +449,13 @@ function dragstart(event: any){
     const target = event.target;
     dragStartOffsetX.value = event.offsetX - target.clientWidth / 2;
     dragStartOffsetY.value = event.offsetY - target.clientHeight / 2;
+
+    // 设置拖动数据
+    if (target.id === "svg_zhaChi") {
+        event.dataTransfer.setData("node-type", "zhaChi");
+    } else if (target.id === "html") {
+        event.dataTransfer.setData("node-type", "html");
+    }
 }
 
 // html元素拖动到画布中
@@ -475,13 +482,20 @@ function drop(event: any) {
     // console.log(point)
     // 开始一个新的事务
     myDiagram.startTransaction('new node');
+    // 获取拖动数据
+    let nodeType = event.dataTransfer.getData("node-type");
+    let category = "";
+    let key = "html元素";
+    if (nodeType === "zhaChi") {
+        category = "zhaChi";
+        key = "渣池";
+    }
     const newData = {
-        key: 'html元素',
+        key: key,
         color: 'aqua',
         loc: new go.Point(point.x, point.y),
-        bottomArray: [{portId: "bottom0"}],
-        // category: ""   // 使用标准模板绘制节点
-        category: "zhaChi"  // 使用zhaChi的模板绘制节点
+        portArray: [{portId: "bottom0", portKey: "bottom"}],
+        category: category
     };
     myDiagram.model.addNodeData(newData);
     myDiagram.commitTransaction('new node');
@@ -504,8 +518,8 @@ function addPort(side: string) {
         portId: name,
         portKey: side
       };
-      // 获取要修改的端口数据的数组，索引的属性为markArray
-      const arr = node.data.markArray;
+      // 获取要修改的端口数据的数组，索引的属性为portArray
+      const arr = node.data.portArray;
       if (arr) {
         // 其添加到端口数据数组中
         myDiagram.model.insertArrayItem(arr, -1, newportdata);