Я использую 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" });
});
Не уверен, что я сделал правильно, я сослался на некоторые интернет-код, доступный и изменить его.
Моя проблема здесь: Onclick кнопки Я могу добавить новый ящик, а также перетащить соединение из этого окна. Но когда я пытаюсь перетащить этот ящик (т. Е. Изменим его положение), соединение не перемещается. Ящик перемещен, но я не могу переместить соединение с полем.
Когда я пытаюсь переместить только что добавленную коробку или коробку, связанную с новой, оба окна можно перемещать, но соединение остается статическим и не перемещается. где, как если бы другие коробки были перемещены, он перемещается вместе с соединениями. Я добавил изображение для ссылки.
1-е изображение показывает, как появляется новое поле и новое соединение. Второе изображение показывает, как перемещение поля создает проблему. 
Вы можете создать скрипку для игры. –
. Jsplumb еще есть? сайт кажется пустым – swinefeaster
Похоже, что URL-адрес изменен на [jsplumb] (https://jsplumbtoolkit.com/) – Arti