2

我这里有一个 JS 小提琴

在本文档中，我有两个具有连接器的容器。我的问题是如何添加一个新容器，该容器将具有像这样的连接器，在单击按钮时会有绿色和粉红色的圆点。

HTML

<html>

<body>
     <button id="aDD" onclick="AddDiv();" style="width:10px;height:10px;" value="Add New Div"></button>
    <div>
        <div id="a" class="a window" style="width: 100px; height: 100px; border: solid 1px">
        </div>
        <br>
        <div id="b" class="b window" style="width: 100px; height: 100px; border: solid 1px;">
        </div>
    </div>
</body>
</html>

jQuery

    var a = $("#a");
    var b = $("#b");

    //Setting up drop options
    var targetDropOptions = {
        activeClass: 'dragActive'
    };

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

    //Setting up a Source endPoint
    var sourceColor = "#ff9696";
    var sourceEndpoint = {
        anchor: "BottomCenter",
        endpoint: ["Dot", { radius: 8}],
        paintStyle: { fillStyle: sourceColor },
        isSource: true,
        scope: "green dot",
        connectorStyle: { strokeStyle: sourceColor, lineWidth: 8 },
        connector: ["Bezier", { curviness: 63}],
        maxConnections: -1, 
        isTarget: true,
        dropOptions: targetDropOptions
    };

    jsPlumb.bind("ready", function () {

        //Set up endpoints on the divs
        jsPlumb.addEndpoint($(".window"), targetEndpoint);
        jsPlumb.addEndpoint($(".window"), sourceEndpoint);

        jsPlumb.draggable($(".window"));
    });
4

1 回答 1

4

在按钮单击时添加下面的 JS 函数

function AddDiv() {
            var Div = $('<div>', { id: "X12" }, 
                                 { class: 'window ui-draggable' })
                      .css(
                                 { height: '100px', 
                                   width: '100px', 
                                   border: 'solid 1px' 
                                 }
                          ).appendTo('body');
            jsPlumb.addEndpoint($(Div), targetEndpoint);
            jsPlumb.addEndpoint($(Div), sourceEndpoint);
            jsPlumb.draggable($(Div));
            $(Div).addClass('window');
        }

我的 JSFiddle 在这里

于 2013-02-22T09:43:16.880 回答