1

jsplumb接続をブラウザの上部にドラッグするときにスクロールを作成するにはどうすればよいですか？ネットを検索しましたが、巻物を作成するための解決策が見つかりませんでした。

4

2 に答える 2

5

デモを確認するには、ここをクリックしてください

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>
于 2013-02-28T14:51:35.100 に答える
0

私の場合、プロパティposition：relativeとoverflow：scrollを持つdivが1つあり、この1つの内部のすべての図形が上下にスクロールします。お役に立てば幸いです。

于 2013-03-13T09:06:44.663 に答える