Question

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

请参阅下面的示例代码。

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

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

Answer 1

问题解决了

使用jsPlumb.connect（）instesd of firstInstance.connect（）。

jsPlumb连接器无法拖动

1 个答案: