Javascript jsPlumb连接器不可拖动_Javascript_Jquery_Css_Jsplumb

Javascript jsPlumb连接器不可拖动

javascript jquery css

Javascript jsPlumb连接器不可拖动,javascript,jquery,css,jsplumb,Javascript,Jquery,Css,Jsplumb,我正在尝试使用来自服务器的数据创建一个流digram，我能够正确地绘制状态和连接，状态是可拖动的，但连接器不起作用请参阅下面的示例代码 <html> <head> <script src="../../lib/jquery-1.9.0.js"></script> <script src="../../lib/jquery-ui-1.9.2-min.js"></script> <script s

我正在尝试使用来自服务器的数据创建一个流digram，我能够正确地绘制状态和连接，状态是可拖动的，但连接器不起作用

请参阅下面的示例代码

<html>
<head>
    <script src="../../lib/jquery-1.9.0.js"></script>
    <script src="../../lib/jquery-ui-1.9.2-min.js"></script>
    <script src="../../lib/jquery.jsPlumb-1.4.1-all.js"></script>

    <script>

        $(document).ready(function() {

            var i = 0;

            var top = 50;
            var left = 500;

            for (var j = 0; j <= 5; j++) {
                top += 150;

                var newState = $('<div>').attr('id', 'state' + j).addClass('item');
                var title = $('<div>').addClass('title').text('State ' + j);

                newState.css({
                    'top': top,
                    'left': left
                });

                newState.append(title);
                $('#container').append(newState);

                if (j > 0) {

                    var firstInstance = jsPlumb.getInstance();

                    firstInstance.importDefaults({
                        Connector: ["Flowchart", {curviness: 150}],
                        Anchors: ["BottomCenter", "TopCenter"]
                    });

                    firstInstance.connect({
                        endpoint: "Rectangle",
                        source: "state" + (j-1),
                        target: "state" + (j),
                        paintStyle: {lineWidth: 3, strokeStyle: 'black'},
                        overlays: [
                            "Arrow",
                            ["Label", {location: 0.25, id: "myLabel"}]
                        ]
                    });
                }

                jsPlumb.draggable(newState, {
                    containment: 'parent'
                });
            }

        });
    </script>

    <style type="text/css">

        .item {
            border: 1px solid black;
            background-color: #ddddff;
        }

        #container {
            border: 1px solid gray;
            width: 1500px;
            height: 1500px;

        }
        .title {
            padding: 10px;
            cursor: move;
        }

        .item {
            position: absolute;
            border: 1px solid black;
            background-color: #ddddff;
        }
    </style>
    <title>Getting started with jsPlumb</title>
</head>
<body>
    <div id="container"></div>
</body>


$（文档）.ready（函数（）{
var i=0；
var-top=50；
左var=500；
对于（var j=0；j 0）{
var firstInstance=jsPlumb.getInstance（）；
firstInstance.importDefaults({
连接器：[“流程图”{弯曲度：150}]，
锚定：[“底部中心”，“顶部中心”]
});
firstInstance.connect({
端点：“矩形”，
资料来源：“国家”+（j-1），
目标：“状态”+（j），
画风：{lineWidth:3，strokeStyle:'black'}，
覆盖层：[
“箭”，
[“标签”{位置：0.25，id:“myLabel”}]
]
});
}
jsPlumb.draggable（新闻状态{
遏制：“家长”
});
}
});
.项目{
边框：1px纯黑；
背景色：#ddff；
}
#容器{
边框：1px纯色灰色；
宽度：1500px；
高度：1500px；
}
.头衔{
填充：10px；
光标：移动；
}
.项目{
位置：绝对位置；
边框：1px纯黑；
背景色：#ddff；
}
开始使用jsPlumb

我需要使连接器可以拖动，任何帮助都是徒弟。

问题已经解决

使用jsPlumb.connect（）代替firstInstance.connect（）