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

I have created a simple UI where a user can drag elements from the toolbox and drop them on the canvas and then connect them with each other. But when I try to make the connections after giving each the connection points(the white square on the elements' left corner), unique IDs, the connecting lines start from somewhere else in the canvas and do not get connected as shown below.As soon as I release the mouse the connector lines disappear.

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

Here's my JS Function where I drop the element

这是我的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();


    }

1 个解决方案

#1

A simple change to the CSS relating to the dropped element made all the difference. But am trying to figure out how exactly this change affected the behaviour of the connectors as am simply appending them to the already existing jsPlumb drop element. So far my best guess is the z-index property. So I thought of sharing this here and would encourage further answers in this regard as well.

对删除元素的CSS的简单更改使得完全不同。但我想弄清楚这种变化究竟是如何影响连接器的行为的,只需将它们附加到已经存在的jsPlumb drop元素即可。到目前为止,我最好的猜测是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;
}