score:1

Accepted answer

You needed to add the JsPlumb library on your jsfidlle, after that you need to add the endpoints after you added yours components on the diagram zone.

I updated your jsfiddle, I hope I've helped.

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

Related Query

More Query from same tag