在 jsPlumb 中创建元素之间的连接答案

【问题标题】：Creating Connections between Elements in jsPlumb在 jsPlumb 中创建元素之间的连接
【发布时间】：2016-07-06 05:49:32
【问题描述】：

我创建了一个简单的 UI，用户可以在其中从工具箱中拖动元素并将它们放在画布上，然后将它们相互连接。但是，当我在给每个连接点（元素左角的白色方块）、唯一 ID 后尝试建立连接时，连接线从画布中的其他位置开始，并且如下所示没有连接。尽快当我松开鼠标时，连接线消失了。

这是我放置元素的 JS 函数

function dropCompleteElement(newAgent,i,e,kind)
    {
        $(droppedElement).draggable({containment: "container"});

        var finalElement =  newAgent;
        r++; q++;

        if(kind=="import")
        {
            var connection = $('<div>').attr('id', i + '-import').addClass('connection');
        }
        else if (kind=="export")
        {
            var connection = $('<div>').attr('id', i + '-export').addClass('connection');
        }
        else
        {
            var connection = $('<div>').attr('id', i + '-defined').addClass('connection');
        }


        finalElement.css({
            'top': e.pageY,
            'left': e.pageX
        });


        finalElement.append(connection);

        $('#container').append(finalElement);

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

        jsPlumb.makeTarget(connection, {
            anchor: 'Continuous'
        });

        jsPlumb.makeSource(connection, {
            anchor: 'Continuous'
        });

        $("#container").removeClass("disabledbutton");
        $("#toolbox").removeClass("disabledbutton");

        var myNode = document.getElementById("lot");
        var fc = myNode.firstChild;

        while( fc ) {
            myNode.removeChild( fc );
            fc = myNode.firstChild;
        }

        $(".toolbox-titlex").hide();
        $(".panel").hide();


    }

【问题讨论】：

标签： javascript draggable droppable jsplumb connection

【解决方案1】：

对与被删除元素相关的 CSS 进行简单更改就完全不同了。但是我试图弄清楚这种变化究竟是如何影响连接器的行为的，因为我只是将它们附加到已经存在的 jsPlumb 放置元素中。到目前为止，我最好的猜测是 z-index 属性。所以我想在这里分享这个，并鼓励在这方面提供进一步的答案。

CSS

.streamdrop {
    border: 1px solid #346789;
    box-shadow: 2px 2px 19px #aaa;
    -o-box-shadow: 2px 2px 19px #aaa;
    -webkit-box-shadow: 2px 2px 19px #aaa;
    -moz-box-shadow: 2px 2px 19px #aaa;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    opacity: 0.8;
    width: 130px;
    height: 72px;
    line-height: 80px;
    cursor: pointer;
    text-align: center;
    z-index: 20;
    position: absolute;
    background-color: #eeeeef;
    color: black;
    font-family: helvetica, sans-serif;
    padding: 0.5em;
    font-size: 0.9em;
    -webkit-transition: -webkit-box-shadow 0.15s ease-in;
    -moz-transition: -moz-box-shadow 0.15s ease-in;
    -o-transition: -o-box-shadow 0.15s ease-in;
    transition: box-shadow 0.15s ease-in;
}

【讨论】：