jsplumb - drag and drop connection from all side of a div

Question

I am making a flowchart editor using jsplumb. In flowchart connector demo of jsplumb, we could make drag and drop connection from one side of div, i want that div to accept and make connection from all four sides.

Thanks.

Answer 1

use endpointoption

and set isSource:true, isTarget:true

to make each endpoint play both role

Answer 2

If you want endpoints to move to any side of the div, then you should use Dynamic Anchors:

These are Anchors that can be positioned in one of a number of locations, choosing the one that is most appropriate each time something moves or is painted in the UI.

There is no special syntax to creating a DynamicAnchor; you just provide an array of individual Static Anchor specifications

To avoid that you can use Default Dynamic Anchor instead

jsPlumb provides a dynamic anchor called "AutoDefault" that chooses from TopCenter, RightMiddle, BottomCenter and LeftMiddle

For example when adding, endpoint can be specified like this:

        var anEndpoint = {
            endpoint: "Rectangle",
            isSource: true,
            isTarget: true,

            anchor:"AutoDefault"
        };

To try it, use this fiddler

Refer to jsPlumb docs for more info