jsPlumb连接器和端点未正确放置在从数据库动态创建的位置

Question

jsPlumb的新手... 我正在动态创建块元素，端点和连接器，并将数据以json的形式存储在数据库中。 为了进行编辑，我正在从db检索数据并在网格上重新创建它（使用具有重复/线性渐变属性的背景图像创建），在网格上创建了​​块元素，端点（所有端点都重叠），如下所示...

但是，如果我拖动块元素，则端点的定位如下。

如果我们观察到是否移动了一个块元素，那么相应的端点就会出现... 在这里，我已经移动了两个元素，所以它正确对齐了... 所以，请建议我如何将元素加载到正确的位置上，而不是拖拽本身...我正在使用jsPlumb版本1.4.1-all-min.js ... 这是我的html

<div class="card-body" style="height:89%;padding: 1%;background:white;">
<div id="diagramContainer" style="width:100%;height:100%;">
    <div plumb-item class="item" ng-repeat="module in schema" ng-style="{ 'left':module.x, 'top':module.y }" data-identifier="{{module.schema_id}}">
        <div class="title">{{module.title}}</div>
        {{module.description}}
        <div plumb-connect class="connect"></div>
    </div>
</div>

这就是CSS ...

#diagramContainer {
padding: 21px;
width: 80%;
height: 199px;
border: 1px solid gray;
/* background-image: url(http://freedevelopertutorials.azurewebsites.net/wp-content/uploads/2015/06/grid.png);
background-repeat: repeat; */
background: #fff;
background-size: 7px 7px;
background-image: linear-gradient(to right, rgba(10, 10, 10, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(10, 10, 10, 0.3), transparent 1px);
position: relative;}


.item {
    position: relative; } .item .top {
    position: absolute;
    top: 0;
    left: 0; } .item .bottom {
    position: absolute;
    bottom: 0;
    left: 0; } .item .center {
    position: absolute;
    top: 50%; } .item-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none; } .item-overlay.active, .item:hover .item-overlay {
    display: block; }

Answer 1

我知道了...我只是需要延迟块，连接器和端点的创建...当我动态创建它时...首先呈现控制器文件，然后呈现html..hence首先创建了块和连接器，并通过html divs（网格背景）对其进行了分层...即使具有位置和z-index属性的连接也没有显示，因为它具有许多父div ...