Jsplumb dragging connection to top does not create scroll

Question

How can I create scroll when I drag jsplumb connections to the top of the browser? I searched through the net but couldn't find a solution to create scrolls.

Answer 1

Click here to check the Demo

JSPlumb or JQuery

<script>

    var targetDropOptions = {

    };

    connectorHoverStyle = {
        lineWidth: 7,
        strokeStyle: "#2e2aF8",
        cursor: 'pointer'
    }

    //Setting up a Target endPoint
    var targetColor = "#316b31";
    var targetEndpoint = {
        anchor: "LeftMiddle",
        endpoint: ["Dot", { radius: 8}],
        paintStyle: { fillStyle: targetColor },
        //isSource: true, 
        scope: "green dot",
        connectorStyle: { strokeStyle: targetColor, lineWidth: 8 },
        connector: ["Flowchart", { curviness: 63}],
        maxConnections: 1,
        isTarget: true,
        dropOptions: targetDropOptions,
        connectorHoverStyle: connectorHoverStyle
    };

    //Setting up a Source endPoint
    var sourceColor = "#ff9696";
    var sourceEndpoint = {
        anchor: "RightMiddle",
        endpoint: ["Dot", { radius: 8}],
        paintStyle: { fillStyle: sourceColor },
        isSource: true,
        scope: "green dot",
        connectorStyle: { strokeStyle: sourceColor, lineWidth: 4 },
        connector: ["Flowchart", { curviness: 63}],
        maxConnections: 1,
        //            isTarget: true,
        dropOptions: targetDropOptions,
        connectorHoverStyle: connectorHoverStyle
    };
    jsPlumb.bind("ready", function () {

        jsPlumb.animate($("#A"), { "left": 50, "top": 100 }, { duration: "slow" });
        jsPlumb.animate($("#B"), { "left": 300, "top": 100 }, { duration: "slow" });
        var window = jsPlumb.getSelector('.window');
        jsPlumb.addEndpoint(window, targetEndpoint);
        jsPlumb.addEndpoint(window, sourceEndpoint);

        jsPlumb.draggable(window);

    });

</script>

HTML

<div id="A" class="a window" 
    style="width: 100px; height: 100px; border: solid 1px;">
    <strong>A</strong>
</div>
<div id="B" class="b window" 
    style="width: 100px; height: 100px; border: solid 1px;">
    <strong>B</strong>
</div>