Question

当我动态添加源和目标时会发生这种情况：

Example

我在这里做的是在容器内双击创建动态实体。在这些实体中，用户可以添加sources（左）和targets（右）。问题是当我尝试将源与目标连接时，它以某种方式链接到实体的原始parent ID。灰色线没有隐形target（左边是加号，大灰点是起点）。这是我的代码：

<body>
    <div id="pContainer"></div>

    <script>
        $(document).ready(function() {
            jsPlumb.Defaults.PaintStyle = {
                lineWidth: 4,
                strokeStyle: 'rgba(123, 123, 123, 1)',
            };
            jsPlumb.Defaults.LogEnabled = true;

            var i = 1;

            $('#pContainer').dblclick(function(evt) {
                var newEntity = $('<div>').attr('id', 'entity' + i).addClass('item');

                newEntity.css({
                    'top': evt.pageY,
                    'left': evt.pageX,
                });

                var title = $('<div>').addClass('title').text('Activity ' + i);
                var sockets = $('<div>').addClass('sockets');
                var socketsLeft = $('<span>').addClass('socketsLeft');
                var leftAdd = $('<i>').addClass('fa fa-plus-circle');
                var socketsRight = $('<span>').addClass('socketsRight');
                var rightAdd = $('<i>').addClass('fa fa-plus-circle');

                var clear = $('<div>').addClass('clear');

                socketsLeft.append(leftAdd);
                socketsRight.append(rightAdd);
                sockets.append(socketsLeft);
                sockets.append(socketsRight);

                newEntity.append(title);
                newEntity.append(sockets);
                newEntity.append(clear);

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

                newEntity.click(function(evt) {
                    $('div[id^="entity"]').css({
                        'box-shadow': 'none',
                    });
                    $(this).css({
                        'box-shadow': '0px 0px 0px 3px rgba(47, 169, 240, 0.8)',
                    });
                });

                /*newEntity.dblclick(function(evt) {
                    jsPlumb.detachAllConnections($(this));
                    $(this).remove();
                    evt.stopPropagation();
                });*/

                $(leftAdd).click(function(evt) {
                    var _this = $(this);

                    var connect = $('<div>').addClass('connect');
                    var tagName = $('<div>').addClass('tagName').text('Fieldname 1');

                    jsPlumb.makeTarget(connect, {
                        parent: _this.parent(),
                        dropOptions: {
                            hoverClass: 'dragHover'
                        },
                        anchor: 'Continuous',
                        connector: 'Flowchart',
                        paintStyle: {
                            fillStyle: 'rgba(123, 123, 123, 1)',
                            radius: 1,
                        },
                    });

                    $(this).closest('.socketsLeft').prepend('<br>');
                    $(this).closest('.socketsLeft').prepend(tagName);
                    $(this).closest('.socketsLeft').prepend(connect);
                });

                $(rightAdd).click(function(evt) {
                    var _this = $(this);

                    var connect = $('<div>').addClass('connect');
                    var tagName = $('<div>').addClass('tagName').text('Fieldname 1');

                    jsPlumb.makeSource(connect, {
                        parent: _this.parent(),
                        anchor: 'Continuous',
                        connector: 'Flowchart',
                        paintStyle: {
                            fillStyle: 'rgba(123, 123, 123, 1)',
                            radius: 10,
                        },
                    });

                    $(this).closest('.socketsRight').prepend('<br>');
                    $(this).closest('.socketsRight').prepend(connect);
                    $(this).closest('.socketsRight').prepend(tagName);
                });

                newEntity.hover(function(evt) {
                    //$(this).toggleClass('shadow');
                });

                $('#pContainer').append(newEntity);

                i++;
            });
        });
    </script>
</body>

额外图片：

Extra Image

Answer 1

更新了 Fiddle

您需要为所有连接设置公共容器，否则会导致奇怪的连接。包括以下代码：

jsPlumb.Defaults.Container = $("#pContainer");

当您将connect对象作为源和目标时，然后删除实体的jsPlumb.draggable()并尝试使用可拖动的自定义jQuery，如下所示：

newEntity.draggable({
         drag:function(e){
              $(this).find('._jsPlumb_endpoint_anchor_').each(function(i,e){                            
                      jsPlumb.repaint($(e));
              });       
         }
});

更新：您可以使用anchor选项限制端点端。代码：

jsPlumb.makeSource(connect, {
            parent: connect,
            anchor: 'Right',    // Restrict endpoint side
            connector: 'Flowchart',
            paintStyle: {
                fillStyle: 'rgba(123, 123, 123, 1)',
                radius: 10,
            },
});

左手边。

最终 FIDDLE ，包括可拖动选项修复！

源于目标的源头因动态创造而失败

1 个答案: