0

これは私のJSFiddleです

クエリ-IDA1とBの間の接続を確立しようとすると、接続のピンクの線がDivBから離れて表示されます。強調表示されたピンクの線の下がDivBから離れています。これが問題です。

ScreenShot

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

IDが何らかの形でそれらのアンカーの属性である必要がある場合、同じDivに複数のアンカーを配置したかったのです。

これを達成するために。最初に余分なdivを削除しました。ここで、誰かが2つのソースアンカーを表示したいとします。そのために、 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]);

接続でソース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);
};

これが同じ問題に直面しているユーザーに役立つことを願っています...

于 2013-02-27T18:41:02.073 に答える