JsPlumb - 在可拖动元素上使用时端点不刷新位置答案

【问题标题】：JsPlumb - Endpoints do not refresh position when used on draggable elementJsPlumb - 在可拖动元素上使用时端点不刷新位置
【发布时间】：2011-08-24 14:58:05
【问题描述】：

我开始使用jsPlumb 和 JQuery，我想连接可拖动元素，但如果我添加连接之前的可拖动行为然后连接不刷新位置。

我的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title></title>

        <style type="text/css">
            .window {
                background-color: white;
                border: 3px solid #346789;
                color: black;
                font-family: helvetica;
                font-size: 0.8em;
                height: 12em;
                opacity: 0.8;
                padding: 0.5em;
                position: absolute;
                width: 14em;
                z-index: 20;
            }
        </style>

        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="jquery-ui.min.js"></script>
        <script type="text/javascript" src="jquery.jsPlumb-1.3.2-all-min.js"></script>
    </head>
    <body>
    <div>
        <div id="a" class="a window" style="width: 100px;height: 100px;border: solid 1px"></div>
        <div id="b" class="b window" style="width: 100px;height: 100px;border: solid 1px;"></div>
    </div>
    <script type="text/javascript">

        $(document).ready(function() {

            $(".window").draggable();

            var a = $("#a");
            var b = $("#b");
            jsPlumb.connect({
                source:a,
                target:b,
                connector:["Bezier",68],
                endpoints:[
                    ["Dot",{radius:12}],
                    ["Rectangle",{width:20,height:30}]
                ]
            });
        });
    </script>
    </body>
    </html>

【问题讨论】：

嗨，比尔，我遇到了这个问题，你解决了吗？

标签： javascript jquery jsplumb

【解决方案1】：

我写了 jsPlumb。

它不刷新的原因是它无法知道正在拖动的东西。而不是调用 $(".window").draggable()，您需要让 jsPlumb 在建立连接时为您执行此操作，或者通过此方法：

jsPlumb.draggable($(".window"));

第一个选项不会初始化任何没有连接的窗口的拖动。第二个会。

【讨论】：

那么jsPlumb是否支持动态创建元素的连接性？
我有同样的问题，我需要在我动态创建的元素中进行这项工作，我调用 jsPlumb.draggable($(".classname)); 但它不起作用....

【解决方案2】：

有几种方法可以做到这一点 - 请参阅jsPlumb documentation

，但一般你可以使用：

元素的 ID
元素数组
或选择器（例如前面提到的类选择器：jsPlumb.draggable($(".window"));

这是一个工作示例：

<!DOCTYPE html>
<html>
<head>
    <title>JS plumb test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
        <script type="text/javascript" src="/include/jquery.jsPlumb-1.3.16-all-min.js"></script>

    <style>
        .window { 
            background-color: #EEEEEF;
            border: 1px solid #346789;
            border-radius: 0.5em;
            box-shadow: 2px 2px 19px #AAAAAA;
            color: black;
            height: 5em;
            position: absolute;
            width: 5em;
            cursor: pointer;
        }
    </style>

    <script>

        jsPlumb.ready(function () {

            // three ways to do this - an id, a list of ids, or a selector (note the two different types of selectors shown here...anything that is valid jquery will work of course)

            //jsPlumb.draggable("container0");
            //jsPlumb.draggable(["container0", "container1"]);
            jsPlumb.draggable($(".window"));

            //perform operation only after DOM is loaded
            var e0 = jsPlumb.addEndpoint("container0"),
                e1 = jsPlumb.addEndpoint("container1");



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


        });


    </script>

</head>
 <body >
     <div class="window" style="left: 20px" id="container0">
     </div>

    <div class="window"  style="left: 200px" id="container1">
    </div>
</body>
</html>

【讨论】：