0

这是我的 JSFiddle

查询 - 当我尝试在 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>
4

1 回答 1

0

我想在同一个 Div 上有多个锚点，提供的 ID 应该是这些锚点的属性。

为了做到这一点。我首先删除了额外的 div。现在假设有人想要显示两个源锚。为此，我在 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
}

修改如下。我现在为每个 anchor(circle) 添加 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 分配尽可能多的不同 Anchors。

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

您将如何在 Connection 上分配 Source ID 和 target 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);
};

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

于 2013-02-27T18:41:02.073 回答