2014-10-06 91 views
1

我想要做的是在兩個元素之間建立連接。 這是我現在所擁有的。jsPlumb連接不會相應地移動到元素位置

asp.net:

<asp:Button ID="centerCircle" runat="server" CssClass="dependencyCircle centerCircle core" Text="Core Apps" OnClientClick="test2()"></asp:Button> 

<asp:Button ID="apiCircle" runat="server" CssClass="dependencyCircle rightCornersB support" Text="APIs" OnClientClick="test()"></asp:Button> 

jsplumb:

jsPlumb.importDefaults({ 

ConnectionsDetachable:false 

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


var firstInstance = jsPlumb.getInstance({ 
    PaintStyle: { 
     lineWidth: 10, 
     strokeStyle: "#567567", 
     outlineColor: "black", 
     outlineWidth: 1 
    }, 
    Connector: ["Bezier", { curviness: 30 }], 
    Endpoint: ["Dot", { radius: 8 }], 
}); 
firstInstance.connect({ 
    source: "apiCircle", 
    target: "centerCircle", 
    anchors: ["Left", "BottomRight"], 

}); 
}); 

當我運行該應用程序它生成兩個元件之間的連接,但是當我調整窗口的大小和兩個位置元素更改,連接不會相應地移動到兩個元素的位置。有沒有任何理由說明爲什麼連接不會根據兩個元素的位置重新調整其位置?

回答

1

每當調整窗口大小時,都需要告訴jsPlumb重新繪製所有連接,因爲元素的位置已更改。 代碼:

$(window).resize(function() { 
    jsPlumb.repaintEverything(); //firstInstance.repaintEverything(); 
});