jsplumb - Jsplumb拖动连接到顶部不会创建滚动

Question

将 jsplumb 连接拖到浏览器顶部时如何创建滚动？我在网上搜索但找不到创建卷轴的解决方案。

Answer 1

点击这里查看演示

JSPlumb 或 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>

Answer 2

在我的例子中，我有一个属性为 position:relative 和 overflow:scroll 的 div，其中的所有形状都可以上下滚动。我希望能帮助你。