Я использую 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" });
});
Не уверен, что я сделал правильно, я сослался на какой-то доступный онлайн-код и изменил его.
Моя проблема заключается в следующем: при нажатии кнопки я могу добавить новое поле, а также перетащить соединение из этого поля. Но когда я пытаюсь перетащить этот ящик (т.е. изменить его положение), соединение не перемещается. Ящик перемещен, но я не могу переместить соединение с ящиком.
Когда я пытаюсь переместить только что добавленный ящик или ящик, подключенный к новому, оба ящика можно переместить, но соединение остается статическим и не перемещается. где, как если бы другие ящики перемещались, он перемещался вместе с соединениями. Я добавил изображение этого для справки.
1-е изображение показывает, как появляется новое добавленное поле и новое соединение. 2-е изображение показывает, как перемещение коробки создает проблему. 
