我正在使用jsplumb绘制动态状态机图。单击按钮后，我需要在绘图区域中添加新框，并允许用户根据需要放置它。
我没有得到任何适当的，易于理解的文档。我尝试了几件事：
var i=8;
function AddDiv() {
var obj = new Date();
var Div = $('<div/>', {
'class':'box ui-draggable ui-draggable-handle ui-droppable',
'id':'box_'+i,
'html':'BOXESNEW'
}).appendTo('.statemachine_cont');
jsPlumb.addEndpoint($(Div), targetEndpoint);
$(Div).draggable(
{
drag: function(){
jsPlumb.repaint($(this)); // (or) jsPlumb.repaintEverything(); to repaint the connections and endpoints
// jsPlumb.addEndpoint($(this));
}
});
$(Div).addClass('box ui-draggable ui-draggable-handle ui-droppable');
}
var a = $("#a");
//Setting up drop options
var targetDropOptions = {
activeClass: 'dragActive'
};
//Setting up a Target endPoint
var targetColor = "#BEBEBE";
var targetEndpoint = {
anchor: "BottomCenter", //Placement of Dot
endpoint: ["Dot", { radius: 8}], //Other types are rectangle, Image, Blank, Triangle
paintStyle: { fillStyle: targetColor }, //Line color
isSource: true, //Starting point of the connector
// scope: "green dot",
connectorStyle: { strokeStyle: "#5C96BC", lineWidth: 2 }, // Means Bridge width and bridge color
connector: ["Bezier"], //Other properties Bezier
maxConnections: -1, //No upper limit
isTarget: true, //Means same color is allowed to accept the connection
dropOptions: targetDropOptions //Means when the drag is started, other terminals will start to highlight
};
jsPlumb.bind("ready", function () {
//Set up endpoints on the divs
jsPlumb.addEndpoint($(".box ui-draggable ui-draggable-handle ui-droppable"), targetEndpoint);
jsPlumb.addEndpoint($(".box ui-draggable ui-draggable-handle ui-droppable"), sourceEndpoint);
jsPlumb.draggable($(".box ui-draggable ui-draggable-handle ui-droppable"));
jsPlumb.animate($("#a"), { "left": 50, "top": 100 }, { duration: "slow" });
});
不确定我所做的工作是否正确，我参考了一些可用的在线代码并对其进行了修改。
我的问题是：单击按钮时，我可以添加一个新框，也可以从该框拖动连接。但是当我尝试拖动该框（即更改其位置）时，连接不会移动。盒子已移动，但我无法移动与盒子的连接。
当我尝试移动新添加的盒子或连接到新盒子的盒子时，两个盒子都可以移动，但是连接保持静态并且不会移动。好像其他盒子一样移动，它也随连接一起移动。我添加了一张图片以供参考。
第一张图片显示了新添加的框和新连接的显示方式。第二张图片显示了盒子的移动如何造成问题。
最佳答案
这是我设法使其工作的方法。我修改了我的整个代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='js/jquery-1.10.1.js'></script>
<link rel="stylesheet" type="text/css" href="css/demo-all.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<script type='text/javascript' src="js/jquery.ui.touch-punch-0.2.2.min.js"></script>
<script type='text/javascript' src="js/jquery-ui-1.9.2.min.js"></script>
<script type='text/javascript' src="js/jquery.jsPlumb-1.7.2-min.js"></script>
<style type='text/css'>
.hidden { display: none; }
</style>
<script type='text/javascript'>
$(window).load(function(){
function cloneWindow(instance) {
var $jspContainer = $("#statemachine-demo"),
divid = "fromTemplate_" + new Date().getTime().toString()
$cloneElement = $("<div class='w'>New Window <div class='ep'></div></div>").attr("id", divid);
$jspContainer.append($cloneElement);
instance.draggable(divid);
instance.makeSource($cloneElement, {
filter: ".ep", // only supported by jquery
anchor: "Continuous",
connector: ["StateMachine", {
curviness: 1
}],
connectorStyle: {
strokeStyle: "#5c96bc",
lineWidth: 2,
outlineColor: "transparent",
outlineWidth: 4
},
maxConnections: 10,
onMaxConnections: function (info, e) {
alert("Maximum connections (" + info.maxConnections + ") reached");
}
});
instance.bind("connection", function (info) {
info.connection.getOverlay("label").setLabel(info.connection.id);
});
instance.makeTarget($cloneElement, {
anchor:"Continuous",
dropOptions:{ hoverClass:"dragHover" }
});
}
jsPlumb.ready(function () {
$("#addwindow").click(function() {
cloneWindow(instance);
});
// setup some defaults for jsPlumb.
var instance = jsPlumb.getInstance({
Endpoint: ["Dot", {
radius: 2
}],
HoverPaintStyle: {
strokeStyle: "#1e8151",
lineWidth: 2
},
ConnectionOverlays: [
["Arrow", {
location: 1,
id: "arrow",
length: 14,
foldback: 0.8
}],
["Label", {
label: "Drag this and drop it on another element to make a connection.",
id: "label",
cssClass: "aLabel"
}]
],
Container: "statemachine-demo"
});
jsPlumb.importDefaults({
filter: ".ep",
anchor: "Continuous",
connector: ["StateMachine", {
curviness: 1
}],
connectorStyle: {
strokeStyle: "#5c96bc",
lineWidth: 2,
outlineColor: "transparent",
outlineWidth: 4
},
maxConnections: 10,
dropOptions: {
hoverClass: "dragHover"
}
});
var windows = jsPlumb.getSelector(".statemachine-demo .w");
// initialise draggable elements.
instance.draggable(windows);
// bind a click listener to each connection; the connection is deleted. you could of course
// just do this: jsPlumb.bind("click", jsPlumb.detach), but I wanted to make it clear what was
// happening.
instance.bind("click", function (c) {
instance.detach(c);
});
// bind a connection listener. note that the parameter passed to this function contains more than
// just the new connection - see the documentation for a full list of what is included in 'info'.
// this listener sets the connection's internal
// id as the label overlay's text.
instance.bind("connection", function (info) {
info.connection.getOverlay("label").setLabel(info.connection.id);
});
// suspend drawing and initialise.
instance.doWhileSuspended(function () {
// make each ".ep" div a source and give it some parameters to work with. here we tell it
// to use a Continuous anchor and the StateMachine connectors, and also we give it the
// connector's paint style. note that in this demo the strokeStyle is dynamically generated,
// which prevents us from just setting a jsPlumb.Defaults.PaintStyle. but that is what i
// would recommend you do. Note also here that we use the 'filter' option to tell jsPlumb
// which parts of the element should actually respond to a drag start.
instance.makeSource(windows, {
filter: ".ep", // only supported by jquery
anchor: "Continuous",
connector: ["StateMachine", {
curviness: 1
}],
connectorStyle: {
strokeStyle: "#5c96bc",
lineWidth: 2,
outlineColor: "transparent",
outlineWidth: 4
},
maxConnections: 10,
onMaxConnections: function (info, e) {
alert("Maximum connections (" + info.maxConnections + ") reached");
}
});
// initialise all '.w' elements as connection targets.
instance.makeTarget(windows, {
dropOptions: {
hoverClass: "dragHover"
},
anchor: "Continuous"
});
// and finally, make a couple of connections
instance.connect({
source: "opened",
target: "phone1"
});
instance.connect({
source: "phone1",
target: "inperson"
});
instance.connect({
source: "phone1",
target: "phone1"
});
});
});
});
</script>
</head>
<body>
<div class="demo statemachine-demo" id="statemachine-demo" style="border:2px solid;border-radius:25px;">
<button type="button" id="addwindow">Add Window</button>
<div class="w" id="opened">BEGIN
<div class="ep"></div>
</div>
<div class="w" id="phone1">PHONE INTERVIEW 1
<div class="ep"></div>
</div>
<div class="w" id="phone2">PHONE INTERVIEW 2
<div class="ep"></div>
</div>
<div class="w" id="inperson">IN PERSON
<div class="ep"></div>
</div>
<div class="w" id="rejected">REJECTED
<div class="ep"></div>
</div>
<div class="w hidden" id="template_newwindow">
<div class="ep"></div>
</div>
</div>
</body>
</html>