SachDan SachDan - 1 year ago 277
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);

Answer Source

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

EDIT: a fiddle with your example

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download