我使用jsplumb绘制动态状态机图。点击一个按钮后,我需要在绘图区域添加新框,并允许用户根据需要定位它。Jsplump动态绘制状态机图
我没有得到任何适当的,容易理解的文档。我尝试了几件事:
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" });
});
不知道我做了什么是正确的,我提到了一些可用的在线代码并对其进行了修改。
我在这里的问题是:按钮点击我可以添加一个新的框,也能够从该框中拖动连接。但是当我试图拖动那个盒子(即改变它的位置)时,连接不会移动。 Box已移动,但我无法移动与框的连接。
当我尝试移动新添加的盒子或连接到新盒子的盒子时,两个盒子都可以移动,但连接保持静止并且不移动。就好像其他箱子被移动一样,它随着连接而移动。我添加了一个供参考的图像。
第1张图片显示了新添加的框和新连接的显示方式。第二张图片显示了盒子的移动如何产生问题。
你可以创建一个小提琴来玩。 – 2015-02-13 04:01:28
jsplumb还存在吗?该网站似乎下降 – swinefeaster 2016-07-13 23:59:14
看起来像网址更改为[jsplumb](https://jsplumbtoolkit.com/) – Arti 2016-07-14 05:39:01