Javascript 将端点附着到从选项板拖动的div

我正在开发一个拖放克隆系统。所以我有一个包含两种形状（圆形和矩形）的调色板，我拖动这些形状并将它们克隆到一个单独的div中。 我想将一个或附加到调色板上的形状上，当我将主题拖动并克隆到单独的div中时，我会再次拖动它们，但当我拖动它们时，锚定会从形状上分离

如果你能告诉我如何做到这一点，那将非常有帮助

有一个链接指向我的JSFIDLE代码

$（'.startEventClass'）。可拖动({
助手：“克隆”，
});
$（'.userTaskClass'）。可拖动({
助手：“克隆”，
});
$（'.endEventClass'）。可拖动({
助手：“克隆”，
});
$（“#diagramZone”）。可拖放({
接受：“.startEventClass、.userTaskClass、.endEventClass”，
drop：函数（e、ui）{
dragE1=ui.helper.clone（）；
可拖动的({
安全壳：“图解区”，
});
$（dragE1）.removeClass（“startEventClass”）；
$（dragE1.addClass（“startEventClass”）；
if（ui.draggable[0].id）{
dragE1.附录（“#diagramZone”）；
}
}
})

.startEventClass{
宽度：40px；
高度：40px；
边缘顶部：20px；
左边距：20px；
边缘底部：30px；
边框：实心2px；
边界半径：50px；
}
.userTaskClass{
宽度：120px；
高度：60px；
边缘顶部：20px；
左边距：20px；
边缘底部：30px；
边框：实心2px；
边界半径：5px；
}
.endEventClass{
宽度：40px；
高度：40px；
边缘顶部：20px；
左边距：20px；
边缘底部：30px；
边框：实心5px；
边界半径：50px；
}
#对角地带{
高度：200px；
边框：实心1px；
}

---

您需要在jsfidle上添加JsPlumb库，之后需要在图表区域中添加组件后添加端点

我更新了你的，我希望我能帮上忙

Html

Javascript

$('.startEventClass').draggable({
  helper: "clone",
});

$('.userTaskClass').draggable({
  helper: "clone",
});

$('.endEventClass').draggable({
  helper: "clone",
});

$('#diagramZone').droppable({
  accept: ".startEventClass, .userTaskClass, .endEventClass",
  drop: function(e, ui) {
    dragE1 = ui.helper.clone();
    dragE1.draggable({
      containment: "#diagramZone",
    });
    if (ui.draggable[0].id) {
      dragE1.appendTo('#diagramZone');

      if ($(dragE1).hasClass("startEventClass")) {
            jsPlumb.addEndpoint($(dragE1), {
                isSource: true,
              anchor: [1, 0.5, 0, 0],
              connectorStyle: { strokeStyle: "#316b31", lineWidth: 2 },
                    connectorHoverStyle: { lineWidth: 4 },
                    connector: ["Bezier", { curviness: 10 } ],
                    maxConnections: 1,
                    isTarget: false
          });
      } else if ($(dragE1).hasClass("userTaskClass")) {
            jsPlumb.addEndpoint($(dragE1), {
                isSource: false,
              anchor: [0, 0.5, 0, 0],
              connectorStyle: { strokeStyle: "#316b31", lineWidth: 2 },
                    connectorHoverStyle: { lineWidth: 4 },
                    connector: ["Bezier", { curviness: 10 } ],
                    maxConnections: 1,
                    isTarget: true
          });
          jsPlumb.addEndpoint($(dragE1), {
                isSource: true,
              anchor: [1, 0.5, 0, 0],
              connectorStyle: { strokeStyle: "#316b31", lineWidth: 2 },
                    connectorHoverStyle: { lineWidth: 4 },
                    connector: ["Bezier", { curviness: 10 } ],
                    maxConnections: 1,
                    isTarget: false
          });
      } else if ($(dragE1).hasClass("endEventClass")) {
            jsPlumb.addEndpoint($(dragE1), {
                isSource: false,
              anchor: [0, 0.5, 0, 0],
              connectorStyle: { strokeStyle: "#316b31", lineWidth: 2 },
                    connectorHoverStyle: { lineWidth: 4 },
                    connector: ["Bezier", { curviness: 10 } ],
                    maxConnections: 1,
                    isTarget: true
          });
      }
    }
  }
});

---

谢谢，我在几周前就解决了这个错误，但是你的回答帮助我改变了连接器的样式。

.startEventClass {
  width: 40px;
  height: 40px;
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 30px;
  border: solid 2px;
  border-radius: 50px;
}

.userTaskClass {
  width: 120px;
  height: 60px;
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 30px;
  border: solid 2px;
  border-radius: 5px;
}

.endEventClass {
  width: 40px;
  height: 40px;
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 30px;
  border: solid 5px;
  border-radius: 50px;
}

#diagramZone {
  height: 200px;
  border: solid 1px;
}

$('.startEventClass').draggable({
  helper: "clone",
});

$('.userTaskClass').draggable({
  helper: "clone",
});

$('.endEventClass').draggable({
  helper: "clone",
});

$('#diagramZone').droppable({
  accept: ".startEventClass, .userTaskClass, .endEventClass",
  drop: function(e, ui) {
    dragE1 = ui.helper.clone();
    dragE1.draggable({
      containment: "#diagramZone",
    });
    if (ui.draggable[0].id) {
      dragE1.appendTo('#diagramZone');

      if ($(dragE1).hasClass("startEventClass")) {
            jsPlumb.addEndpoint($(dragE1), {
                isSource: true,
              anchor: [1, 0.5, 0, 0],
              connectorStyle: { strokeStyle: "#316b31", lineWidth: 2 },
                    connectorHoverStyle: { lineWidth: 4 },
                    connector: ["Bezier", { curviness: 10 } ],
                    maxConnections: 1,
                    isTarget: false
          });
      } else if ($(dragE1).hasClass("userTaskClass")) {
            jsPlumb.addEndpoint($(dragE1), {
                isSource: false,
              anchor: [0, 0.5, 0, 0],
              connectorStyle: { strokeStyle: "#316b31", lineWidth: 2 },
                    connectorHoverStyle: { lineWidth: 4 },
                    connector: ["Bezier", { curviness: 10 } ],
                    maxConnections: 1,
                    isTarget: true
          });
          jsPlumb.addEndpoint($(dragE1), {
                isSource: true,
              anchor: [1, 0.5, 0, 0],
              connectorStyle: { strokeStyle: "#316b31", lineWidth: 2 },
                    connectorHoverStyle: { lineWidth: 4 },
                    connector: ["Bezier", { curviness: 10 } ],
                    maxConnections: 1,
                    isTarget: false
          });
      } else if ($(dragE1).hasClass("endEventClass")) {
            jsPlumb.addEndpoint($(dragE1), {
                isSource: false,
              anchor: [0, 0.5, 0, 0],
              connectorStyle: { strokeStyle: "#316b31", lineWidth: 2 },
                    connectorHoverStyle: { lineWidth: 4 },
                    connector: ["Bezier", { curviness: 10 } ],
                    maxConnections: 1,
                    isTarget: true
          });
      }
    }
  }
});