将端点附加到从调色板绘制的 div

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，希望我有所帮助。

目录

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

爪哇语

$('.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
});
}
}
}
});