Соединители и конечные точки jsPlumb, не помещенные в правильные значения в динамически создаваемом из базы данных - PullRequest
Новая
       20

Соединители и конечные точки jsPlumb, не помещенные в правильные значения в динамически создаваемом из базы данных

0 голосов
/ 10 октября 2018

новичок в jsPlumb ... Я динамически создаю блочные элементы, конечные точки и соединители и сохраняю данные в виде json в БД.Для редактирования я извлекаю данные из базы данных и воссоздаю их в сетке (создавая с использованием фонового изображения со свойством повторения / линейного градиента), элементы сетки, конечные точки (все конечные точки перекрываются) создаются в сетке, как показано ниже ...enter image description here

Но если я перетаскиваю элементы блока, конечные точки позиционируются, как показано ниже .. enter image description here

Если мы заметим, чтоодин элемент блока перемещается, что приходит соответствующая конечная точка ... enter image description here Здесь я переместил оба элемента, чтобы он был правильно выровнен ... Итак, пожалуйста, предложите мне, как правильно загрузить элементыПозицию самозагрузки вместо перетаскивания ... Я использую 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; }

1 Ответ

0 голосов
/ 23 октября 2018

Я понял это ... мне просто нужно было отложить создание блоков, соединителей и конечных точек ... так как я создавал это динамически ... сначала отображался файл контроллера, а затем html..henceблоки и коннекторы были созданы первыми, и он был наслоен на html divs (фон сетки) ... даже с возможностью подключения свойства position и z-index не было показано, поскольку у него было много родительских divs ...

...