Question

我有一个JS小提琴 here

在本文档中，我有两个带连接器的容器。我的查询是如何添加一个新的容器，这个容器会像点击一个按钮那样有绿色和粉红色点。

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"));
    });

Answer 1

在按钮上添加以下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是 here

如何在JSPlumb中动态添加新容器？

1 个答案: