Javascript 使用jsPlumb和jquery ui的线偏移不正确_Javascript_Jquery Ui_Jsplumb

Javascript 使用jsPlumb和jquery ui的线偏移不正确

javascript jquery-ui

Javascript 使用jsPlumb和jquery ui的线偏移不正确,javascript,jquery-ui,jsplumb,Javascript,Jquery Ui,Jsplumb,我想用jsPlumb连接div。当我使用样式时，它可以工作，但是当我使用jqueryui装饰时，最后的行有一个不正确的偏移量代码： jQueryUI示例页面 $（函数（）{ $（“#顶部”）.手风琴({ 可折叠：错误，图标：false }); }); 铅锤试验顶部文本文本文本底部 jsPlumb.ready（函数（）{ jsPlumb.importDefaults({ 接头zindex:5 }); var jsP=jsPlumb.getInstance({ 画风：{lineWidth

我想用jsPlumb连接div。当我使用样式时，它可以工作，但是当我使用jqueryui装饰时，最后的行有一个不正确的偏移量

代码：


jQueryUI示例页面
$（函数（）{
$（“#顶部”）.手风琴({
可折叠：错误，
图标：false
});
});
铅锤试验
顶部
文本文本文本
底部
jsPlumb.ready（函数（）{
jsPlumb.importDefaults({
接头zindex:5
});
var jsP=jsPlumb.getInstance({
画风：{lineWidth:1，strokeStyle:#567567，outlineColor:“黑色”，outlineWidth:1}，
连接器：“直”，
端点：“空白”
});
var e0=jsP.addEndpoint（“top”，{
锚定：[“周长”{形状：“正方形”，锚定计数：100}]
});
var e1=jsP.addEndpoint（“底部”{
主播：[“TopCenter”]
});
connect（{source:e0，target:e1}）；
});

产生：

理想效果（无手风琴装饰）为：

我做错了什么？这条线似乎是在手风琴装饰之前渲染的。

我找到了一个改变脚本顺序的解决方案，包括jsPlumb one中的样式：

<!doctype html>
<html lang="us">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Example Page</title>
    <link href="css/ui-lightness/jquery-ui-1.9.1.custom.css" rel="stylesheet"/>
    <script src="js/jquery-1.8.2.js"></script>
    <script src="js/jquery-ui-1.9.1.custom.js"></script>
    <script src="js/jquery.jsPlumb-1.3.16-all.js"></script>
</head>

<body>

<h1>jsPlumb tests</h1>

<div id="top"  style="border-width: 2px; border-style: solid; border-color: red;">
    <h1>TOP</h1>
</div>
<div>
    <p>Text Text Text</p>
</div>
<div id="bottom" style="margin: 0px 100px 0px 50px; border-width: 2px; border-style: solid; border-color: red;">
    <h1>Bottom</h1>
</div>

<script>
        $( "#top" ).accordion({
            collapsible: false,
            icons: false
            });


jsPlumb.ready(function() {

jsPlumb.importDefaults({
    ConnectorZIndex:5
});

var jsP = jsPlumb.getInstance({
    PaintStyle:{ lineWidth:1, strokeStyle:"#567567", outlineColor:"black", outlineWidth:1 },
    Connector: "Straight",
    Endpoint: "Blank"
});

var e0 = jsP.addEndpoint("top", { 
    anchor: ["Perimeter", {shape:"square", anchorCount:100}]
});

var e1 = jsP.addEndpoint("bottom", { 
    anchor: ["TopCenter"]
});

jsP.connect({ source:e0, target:e1});

}); 

</script>


</body>
</html>


jQueryUI示例页面
铅锤试验
顶部
文本文本文本
底部
$（“#顶部”）.手风琴({
可折叠：错误，
图标：false
});
jsPlumb.ready（函数（）{
jsPlumb.importDefaults({
接头zindex:5
});
var jsP=jsPlumb.getInstance({
画风：{lineWidth:1，strokeStyle:#567567，outlineColor:“黑色”，outlineWidth:1}，
连接器：“直”，
端点：“空白”
});
var e0=jsP.addEndpoint（“top”，{
锚定：[“周长”{形状：“正方形”，锚定计数：100}]
});
var e1=jsP.addEndpoint（“底部”{
主播：[“TopCenter”]
});
connect（{source:e0，target:e1}）；
});

结果是：

<!doctype html>
<html lang="us">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Example Page</title>
    <link href="css/ui-lightness/jquery-ui-1.9.1.custom.css" rel="stylesheet"/>
    <script src="js/jquery-1.8.2.js"></script>
    <script src="js/jquery-ui-1.9.1.custom.js"></script>
    <script src="js/jquery.jsPlumb-1.3.16-all.js"></script>
</head>

<body>

<h1>jsPlumb tests</h1>

<div id="top"  style="border-width: 2px; border-style: solid; border-color: red;">
    <h1>TOP</h1>
</div>
<div>
    <p>Text Text Text</p>
</div>
<div id="bottom" style="margin: 0px 100px 0px 50px; border-width: 2px; border-style: solid; border-color: red;">
    <h1>Bottom</h1>
</div>

<script>
        $( "#top" ).accordion({
            collapsible: false,
            icons: false
            });


jsPlumb.ready(function() {

jsPlumb.importDefaults({
    ConnectorZIndex:5
});

var jsP = jsPlumb.getInstance({
    PaintStyle:{ lineWidth:1, strokeStyle:"#567567", outlineColor:"black", outlineWidth:1 },
    Connector: "Straight",
    Endpoint: "Blank"
});

var e0 = jsP.addEndpoint("top", { 
    anchor: ["Perimeter", {shape:"square", anchorCount:100}]
});

var e1 = jsP.addEndpoint("bottom", { 
    anchor: ["TopCenter"]
});

jsP.connect({ source:e0, target:e1});

}); 

</script>


</body>
</html>