4

I'm trying to create a straight line connection in JSPlumb between two endpoints. When I try to connect to the endpoint, the source point is dragged instead of creating a straight line connection.

Here the fiddle: http://jsfiddle.net/dutchman71/aMksZ/2/

Any help appreciated.

            var endpointOptions = { 
                    anchor:"BottomCenter",
                    maxConnections:1, 
                    isSource:true, 
                    isTarget:true, 
                    endpoint:["Dot", {radius:5}], 
                    paintStyle:{fillStyle:"#5b9ada"},
                    connectorStyle : {  lineWidth: 3, strokeStyle:"#5b9ada" },
                    connector : new jsPlumb.Connectors.Straight(),
                    setDragAllowedWhenFull:true,
                    connectorOverlays:[ 
                        [ "Arrow", { width:20, length:30, location:1, id:"arrow" } ], 
                        [ "Label", { label:"", id:"label" } ]
                    ]               
                    }

            jsPlumb.bind("ready", function() {

                    jsPlumb.addEndpoint('block1', endpointOptions);

                    jsPlumb.addEndpoint('block2', endpointOptions);

                    jsPlumb.draggable('block1');
                    jsPlumb.draggable('block2');
            });
checkmate711
  • 3,301
  • 2
  • 35
  • 45

1 Answers1

6

Yeah, so it seems I might have found an answer (see docs). Replace this line:

connector: new jsPlumb.Connectors.Straight()

with this line:

connector: ["Straight"]
tokland
  • 66,169
  • 13
  • 144
  • 170
checkmate711
  • 3,301
  • 2
  • 35
  • 45