Question

我正在开发一个拖拽和克隆系统。所以我有一个包含两种形状（圆形和矩形）的调色板，我拖动这些形状并将它们克隆在一个单独的div中。我想将一个ancheor附加到调色板上的形状，当我将主题拖动并克隆到单独的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
          });
      }
    }
  }
});

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

1 个答案: