SachDan SachDan - 3 months ago 40
CSS Question

jsPlumb draggable element javascript function

The JSFiddle will clearly allow you to understand the problem.

I want the endpoints to be binded to the elements inside each container which are draggable but only the endpoints drawn first are correct. The second time the draw function is called, the positions are incorrect and the dragging is not synced.

I have a guess that the problem lie with the CSS position but I can't find it.

jsPlumb.ready(function() {
$(".scroll-box").draggable({
drag: function() {
jsPlumb.repaintEverything();
//jsPlumb.repaint($(this));

}
});
// jsPlumb.draggable($(".scroll-box"));


drawEndPoints("in-leaf", "Right");
drawEndPoints("out-leaf", "Left");



});

function drawEndPoints(classname, endpointposition) {

var endpointOptions = {
isSource: true,
isTarget: true,
endpoint: ["Dot", {
radius: 10
}],
style: {
fillStyle: 'blue'

},
maxConnections: -1,
connector: "Straight",
connectorStyle: {
lineWidth: 2,
strokeStyle: 'black'
},
scope: "blackline",
dropOptions: {
drop: function(e, ui) {
alert('drop!');
}
}
};

jsPlumb.addEndpoint($("." + classname), {
anchor: endpointposition
}, endpointOptions);
//jsPlumb.repaintEverything();
}

Answer

You are missing the jsPlumb.setContainer($("body"));

https://jsfiddle.net/mkaran/mLthybzo/

https://jsplumbtoolkit.com/community/doc/home

EDIT: a fiddle with your example https://jsfiddle.net/mkaran/aof6mq34/