Question

我想使用jsPlumb连接div。它在我使用样式时有效，但是当我使用像accordion这样的jquery-ui装饰时，最后一行的偏移量不正确。

代码：

<!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>

    <script>
    $(function() {
        $( "#top" ).accordion({
            collapsible: false,
            icons: false
            });
    });
    </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>
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>

产地： Result of code

所需的效果（没有手风琴装饰）是： Desired result

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

Answer 1

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

<!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>

结果是： Desired reuslt

使用jsPlumb和jquery-ui的行的偏移量不正确

1 个答案:

使用jsPlumb和jquery-ui的行的偏移​​量不正确

1 个答案:

使用jsPlumb和jquery-ui的行的偏移量不正确