0
У меня есть внутренние div, которые я хочу, чтобы иметь возможность прикреплять конечные точки, к которым я смог выполнить это, но он нарушает соединение, если вы перемещаете div.JSPlumb Line Connectors
Пожалуйста, смотрите пример, который я отправил на jsfiddle
http://jsfiddle.net/scripter78/v3BYw/
jsPlumb.bind("ready", function() {
var windows = $(".w");
var subwindows = $(".s");
jsPlumb.draggable($(".x"));
jsPlumb.draggable(windows);
window.jsPlumbDemo = {
init: function() {
// setup some defaults for jsPlumb.
jsPlumb.importDefaults({
Endpoint: ["Dot", {
radius: 2
}],
HoverPaintStyle: {
strokeStyle: "#1e8151",
lineWidth: 2
},
ConnectionOverlays: [
["Arrow", {
location: 1,
id: "arrow",
length: 14,
foldback: 0.8
}]
]
});
jsPlumb.bind("click", function (c) {
jsPlumb.detach(c);
});
jsPlumb.makeSource(windows, {
filter: ".ep", // only supported by jquery
anchor: "Right",
connector: ["Flowchart", {
curviness: 0
}],
connectorStyle: {
strokeStyle: "#5c96bc",
lineWidth: 2,
outlineColor: "transparent",
outlineWidth: 4
},
maxConnections: 5,
onMaxConnections: function (info, e) {
alert("Maximum connections (" + info.maxConnections + ") reached");
}
});
jsPlumb.makeSource(subwindows, {
filter: ".ep", // only supported by jquery
anchor: "Right",
parent: "parent",
isSource: true,
isTarget: true,
connector: ["Flowchart", {
curviness: 0
}],
connectorStyle: {
strokeStyle: "#5c96bc",
lineWidth: 2,
outlineColor: "transparent",
outlineWidth: 4
},
maxConnections: 5,
onMaxConnections: function (info, e) {
alert("Maximum connections (" + info.maxConnections + ") reached");
}
});
jsPlumb.makeTarget(subwindows, {
dropOptions: {
hoverClass: "dragHover"
},
anchor: "Right"
});
// and finally, make a couple of connections
}
};
var resetRenderMode = function (desiredMode) {
var newMode = jsPlumb.setRenderMode(desiredMode);
$(".rmode").removeClass("selected");
$(".rmode[mode='" + newMode + "']").addClass("selected");
$(".rmode[mode='canvas']").attr("disabled", !jsPlumb.isCanvasAvailable());
$(".rmode[mode='svg']").attr("disabled", !jsPlumb.isSVGAvailable());
$(".rmode[mode='vml']").attr("disabled", !jsPlumb.isVMLAvailable());
jsPlumbDemo.init();
};
resetRenderMode(jsPlumb.SVG);
window.jsPlumbDemo.loadTest = function (count) {
count = count || 10;
for (var i = 0; i < count; i++) {
jsPlumbDemo.init();
}
};
});
<div class="x" id="numberone">Number One
<div class="s">
<div class="sx"></div>Second Div
<div class="ep"></div>
</div>
<div class="s">
<div class="sx"></div>Third Div
<div class="ep"></div>
</div>