Question

查询 - 当我尝试建立ID A1和B之间的连接时，粉红色连线显示远离Div B.粉红色线突出显示远离Div B.这就是问题

JQuery

//Setting up drop options
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" });
    jsPlumb.animate($("#C"), { "left": 540, "top": 100 }, { duration: "slow" });
    jsPlumb.animate($("#D"), { "left": 780, "top": 100 }, { duration: "slow" });

    var window = jsPlumb.getSelector('.window');
    jsPlumb.addEndpoint(window, targetEndpoint);
    jsPlumb.addEndpoint(window, sourceEndpoint);
    jsPlumb.addEndpoint(jsPlumb.getSelector('#A1'), sourceEndpoint, targetEndpoint);

    jsPlumb.draggable(window);

    jsPlumb.importDefaults({
        ConnectionOverlays: [
            ["Arrow", { location: 0.8}],
            ["Label", {
                location: 0.5,
                id: "label",
                cssClass: "aLabel"
            }]
        ]
    });
});

HTML

<div id="A" class="a window" style="width: 100px; height: 100px; border: solid 1px;">
    <strong>A</strong>
    <div id="A1">
    </div>
</div>
<div id="B" class="b window" style="width: 100px; height: 100px; border: solid 1px;">
    <strong>B</strong>
</div>
<div id="C" class="c window" style="width: 100px; height: 100px; border: solid 1px;">
    <strong>C</strong>
</div>
<div id="D" class="d window" style="width: 100px; height: 100px; border: solid 1px;">
    <strong>D</strong>
</div>

Answer 1

我希望在同一个Div上有多个Anchor提供的ID应该是某些锚点的属性。

为了实现这一目标。我先删除了额外的div。现在假设有人想要显示两个Source Anchor。为此，我做了修改 jquery.jsPlumb-1.3.16-all-min.js 档案

以下是此文件中的原始代码行

this.makeNode = function (E, D) { 
    return f("circle", { cx: E[2] / 2, cy: E[3] / 2, r: E[2] / 2
}

修改如下。 我现在正在为每个锚点添加id属性（圆圈）。

this.makeNode = function (E, D) { 
    var attr = $('#'+obj[0].endpoint.elementId).attr('actionID');
    return f("circle", { cx: E[2] / 2, cy: E[3] / 2, r: E[2] / 2, id: attr 
}

我如何获得id的值？

在查询中上面显示的Div中，我添加了一个属性操作并分配了一些我想要分配的ID。如下所示

jsPlumb.getSelector('#first').attr('actionID', 'p1');

最后添加EndPoint

jsPlumb.addEndpoint(jsPlumb.getSelector('#first'), sourceEndpoint);

同样，我可以根据所需的ID分配尽可能多的不同锚。

jsPlumb.getSelector('#first').attr('actionID', 'p3');
jsPlumb.addEndpoint(jsPlumb.getSelector('#first'), [TopMiddle]);

您将如何在Connection上分配源ID和目标ID？

jsPlumb.bind("jsPlumbConnection", function (CurrentConnection) {
    if (CurrentConnection.connection.targetId == 
                                    CurrentConnection.connection.sourceId)
        jsPlumb.detach(CurrentConnection.connection);
    else {
        var obj = CurrentConnection.sourceEndpoint.canvas.children[0].firstChild.id;
        init(CurrentConnection.connection, obj);
    }
});

init = function (connection, CircleID) {
    connection.getOverlay("label").setLabel(CircleID + "-" + connection.targetId);
};

希望这对面临同样问题的用户有所帮助......

为什么连接线在JSPlumb中显示远离Div？

1 个答案: