SachDan SachDan - 7 months ago 86
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() {
drag: function() {

// 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) {

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


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

EDIT: a fiddle with your example