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

在我的情况下，我有一个具有属性位置的div：relative和overflow：scroll并且这个内部的所有形状都可以向上和向下滚动。我希望可以帮到你。

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

2 个答案: