JsPlumb change endpoint position

Working with projects with jsPlumb I am setting a static connector to two map markers. the jsplumb splitter endpoints are displayed above the map marker image while I want them to appear below.

where, in the jsplumb javascript library, edit the computed position of the endpoints?


source to share

1 answer

One way to set the anchor position of the endpoint is to use the default jsPlumb values:

    PaintStyle : {lineWidth:1,strokeStyle:color2},
    Connector: ["Straight"],
    Anchor:"Continuous" // dymamically nearest position will be considered for endpoint
    Anchor:["Top","Bottom"] // only top or bottom center whichever is near will be considered as endpoints
    Anchor:["Left","Right"] // similarly left or right center will be considered


You can also declare at connection time as:

     anchors:["Bottom", "Continuous"] // Bottom nearest point will be considered


For makeTarget and makeSource, declare it as:

jsPlumb.makeSource(someDiv, {
     paintStyle:{ fillStyle:"red" }


Or, when adding an endpoint, declare as:

jsPlumb.addEndpoint(someDiv, {
     paintStyle:{ fillStyle:"red" }




All Articles