jsPlumb connecting custom overlays - endpoint not moved

问题

I am creating custom overlays for my connections in jsPlumb.

connectorOverlays: [
        ["Custom", {
            create: function(component) {
              return connectionNode();
            },
            location:0.5,
            id:"customOverlay"
        }]
    ]

connectionNode() creates a div with a select list in it. The divs themselves should be connectable, i.e., I want to connect two labels of different connectors.

  var overlay_div = $(connection.overlays[0].canvas);
  jsPlumb.addEndpoint(overlay_div, { anchor:[ "Perimeter", { shape:"Rectangle"}] }, relationEndpoint);

Enpoint on the connector overlay is defined as such:

var relationEndpoint = {
        endpoint:["Dot", {radius:4} ],
        anchor: ["BottomRight","TopLeft", "TopRight", "BottomLeft"],
        paintStyle:{ fillStyle:"#ff33333", opacity:0.5 },
        isSource:true,
        connectorStyle:{ strokeStyle:"#ff33333", lineWidth:3 },
        connector : "Flowchart",
        isTarget:true,
        dropOptions : {
        tolerance:"touch",
        hoverClass:"dropHover",
        activeClass:"dragActive"
    },
        beforeDetach:function(conn) { 
            return confirm("Detach connection?"); 
        }
    };

When I now move any of the original nodes that are connected by the connection with the custom overlay, the endpoint is not moved along with the label but remains static where it was created. Can I somehow trigger its movement programatically or am I missing some configuration option?

回答1:

I had this problem too. I was able to fix it with

instance.draggable(jsPlumb.getSelector(".flowchart-demo .window"), { grid: [5, 5] });

where ".flowchart-demo .window" is the class of the div.

The example shown is from jplumb page examples... in my project this line stays

instance.draggable(jsPlumb.getSelector(".flowchart-demo .clsExecutando"), { grid: [5, 5] });

I hope this information helps you.

来源：https://stackoverflow.com/questions/16860785/jsplumb-connecting-custom-overlays-endpoint-not-moved

标签

jsplumb