Fatal编程技术网
  • javascript/
  • Javascript 源到目标的动态创建严重失败

Javascript 源到目标的动态创建严重失败

javascript

Javascript 源到目标的动态创建严重失败,javascript,jsplumb,Javascript,Jsplumb,当我动态添加源和目标时会发生这种情况： 我在这里做的是在容器内双击创建动态实体。在这些实体中，用户可以添加源（左）和目标（右）。问题是，当我尝试将源与目标连接时，它会以某种方式链接到实体的原始父项ID。灰线所在的位置没有不可见的目标（在左侧加号上，大灰点是起点）。这是我的密码： <body> <div id="pContainer"></div> <script> $(document).ready(functi

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

我在这里做的是在容器内双击创建动态实体。在这些实体中，用户可以添加
源
（左）和
目标
（右）。问题是，当我尝试将源与目标连接时，它会以某种方式链接到实体的原始
父项
ID。灰线所在的位置没有不可见的
目标
（在左侧加号上，大灰点是起点）。这是我的密码：


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




$（文档）.ready（函数（）{
jsPlumb.Defaults.PaintStyle={
线宽：4，
strokeStyle:“rgba（1231231231）”，
};
jsPlumb.Defaults.LogEnabled=true；
var i=1；
$（'#pContainer'）.dblclick（函数（evt）{
var newEntity=$（''）.attr（'id'，'entity'+i）.addClass（'item'）；
newEntity.css({
“顶部”：evt.pageY，
“左”：evt.pageX，
});
var title=$（''）.addClass（'title'）.text（'Activity'+i）；
var sockets=$（''）.addClass（'sockets'）；
var socketsLeft=$（''）.addClass（'socketsLeft'）；
var leftAdd=$（''）.addClass（'fa-fa+circle'）；
var socketsRight=$（''）.addClass（'socketsRight'）；
var rightAdd=$（''）.addClass（'fa-fa+circle'）；
var clear=$（''）.addClass（'clear'）；
socketsLeft.append（leftAdd）；
socketsRight.append（rightAdd）；
sockets.append（socketsLeft）；
sockets.append（socketsRight）；
新增实体。追加（标题）；
追加（套接字）；
newEntity.append（清除）；
jsPlumb.draggable（新实体{
包含：'父'，
});
新建实体。单击（函数（evt）{
$（'div[id^=“entity”]）.css({
“框阴影”：“无”，
});
$（this.css）({
“盒子阴影”：“0px 0px 0px 3px rgba（47169240，0.8）”，
});
});
/*dblclick（函数（evt）{
jsPlumb.detachAllConnections（$（this））；
$（this.remove（）；
evt.stopPropagation（）；
});*/
$（leftAdd）。单击（函数（evt）{
var_this=$（this）；
var connect=$（''）.addClass（'connect'）；
变量标记名=$（''）.addClass（'tagName'）.text（'Fieldname 1'）；
jsPlumb.makeTarget（连接{
父项：\ u this.parent（），
删除选项：{
悬停类：“德拉戈弗”
},
主播：“连续”，
连接器：“流程图”，
画风：{
fillStyle:'rgba（1231231231）'，
半径：1，
},
});
$（this）.closest（'.socketsLeft'）.prepend（'
'）；
$（this）.closest（'.socketsLeft'）.prepend（标记名）；
$（this）.closest（'.socketsLeft'）.prepend（connect）；
});
$（右添加）。单击（函数（evt）{
var_this=$（this）；
var connect=$（''）.addClass（'connect'）；
变量标记名=$（''）.addClass（'tagName'）.text（'Fieldname 1'）；
jsPlumb.makeSource（连接{
父项：\ u this.parent（），
主播：“连续”，
连接器：“流程图”，
画风：{
fillStyle:'rgba（1231231231）'，
半径：10，
},
});
$（this）.closest（“.socketsRight”）.prepend（“
”）；
$（this）.closest（'.socketsRight'）.prepend（connect）；
$（this）.closest（'.socketsRight'）.prepend（标记名）；
});
newEntity.hover（函数（evt）{
//$（this.toggleClass（'shadow'）；
});
$（'pContainer'）.append（newEntity）；
i++；
});
});


额外图像：


更新了您的

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


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


当您将
连接
对象作为源和目标时，请删除实体的
jsplump.draggable（）
，并尝试使用定制的jQuery draggable，如下所示：


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


更新：
您可以使用
锚定
选项来限制端点侧。代码：


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


左手边是黑色的


最终包括可拖动选项修复
 尝试在创建DIV时设置动态ID<代码>变量连接=$（''）.addClass（'connect'）感谢您对Pruthvi的评论。遗憾的是，这并没有改变效果。奇怪的是，
目标
确实在其位置上有一个小的灰色条纹（像素）。此外，当我移动
目标
元素时，行开始移动。由于某些原因，绘图失败。您能在JSFIDLE中重现您的代码吗？这里是：）谢谢Pruthvi。你知道如何使
源代码真正链接到套接字而不是父块吗？
目标
似乎只有正确链接。太好了。谢谢你，普鲁思维。最后一个问题。我是否可以强制线路避开
#实体
块，或者让线路仅落在插座的左/右侧？这条线可能会断