How to make anchor move with respect to a block dragged in jsplumb? - drag-and-drop

Question

I am trying to build a flowchart using drag and drop options. The user should be able to drag an element from one div and drop it to another.
Now I'm able to drag and drop. I have given an option such that on dropping the block, anchors should appear on them. And I'm able to link these blocks with connectors using js plumb.
I have given the draggable option for dropped blocks. The problem is whenever I drag connected blocks, the anchors' position does not change.
How to make a change such that whenever I drag any block, its anchor and connecting lines should also drag?
Here's my code:
jsPlumb.ready(function() {
var EndpointOptions = {
setDragAllowedWhenFull: true,
endpoint: "Dot",
maxConnections: 10,
paintStyle: {
width: 21,
height: 21,
fillStyle: '#666',
},
isSource: true,
connectorStyle: {
strokeStyle: "#666"
},
isTarget: true,
dropOptions: {
drop: function(e, ui) {
alert('drop!');
}
}
};
var count = 0;
var x = "";
//Make element draggable
$(".drag").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit',
revert: true
});
$(".droppable").droppable({
accept: '.drag',
activeClass: "drop-area",
<!-- stop: function( event, ui ) {}, -->
drop: function(e, ui) {
if ($(ui.draggable)[0].id !== "") {
x = ui.helper.clone();
console.log("x" + JSON.stringify(x));
ui.helper.remove();
x.draggable({
helper: 'original',
cursor: 'move',
containment: '.droppable',
tolerance: 'fit',
drop: function(event, ui) {
$(ui.draggable).remove();
}
});
x.appendTo('.droppable');
x.addClass('clg');
$(".clg").each(function() {
//alert("hello");
jsPlumb.addEndpoint($(this), EndpointOptions);
});
}
<!-- $(".clg").dblclick(function() { -->
<!-- //alert("hello"); -->
<!-- jsPlumb.addEndpoint($(this), EndpointOptions); -->
<!-- }); -->
jsPlumb.bind('connection', function(e) {
jsPlumb.select(e).addOverlay(["Arrow", {
foldback: 0.2,
location: 0.65,
width: 25
}]);
});
console.log("out x" + JSON.stringify(x));
}
});
});

Answer 1

You can use this jsPlumb.repaintEverything();

Answer 2

Here I'm generating an id for each block and adding endpoints based upon respective id.
Here is my changes:
if(null == ui.draggable.attr('id')){
if( ui.draggable.attr('class').indexOf('rule') != -1){
clone.attr('id', 'rule_' + i);
jsPlumb.addEndpoint(clone,{anchors: ["Left"]}, EndpointOptions);
} else {
clone.attr('id', 'event_' + i);
jsPlumb.addEndpoint(clone, {anchors: ["Left"]}, EndpointOptions);
}
i++;