将端点附加到从调色板中拖动的 div

Question

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

如果您能告诉我如何实现这一点，将会非常有帮助。

我的 jsfiddle 代码有一个链接jsfiddle

$('.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",
    });
    $(dragE1).removeClass("startEventClass");
    $(dragE1).addClass("startEventClass");
    if (ui.draggable[0].id) {
      dragE1.appendTo('#diagramZone');
    }
  }
})

.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;
}

<div id="startEvent" class="startEventClass">

</div>

<div id="userTask" class="userTaskClass"></div>

<div id="endEvent" class="endEventClass"></div>

Answer 1

您需要在您的 jsfidlle 上添加 JsPlumb 库，然后您需要在图表区域上添加您的组件后添加端点。

我更新了您的jsfiddle，希望对您有所帮助。

HTML

<div id="startEvent" class="startEventClass"></div>
<div id="userTask" class="userTaskClass"></div>
<div id="endEvent" class="endEventClass"></div>
<div id="diagramZone" class="col-md-8" id="diagramZone"></div>

CSS

.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;
}

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
          });
      }
    }
  }
});