Drag and Drop Jquery блоки соединенные линиями с сохранением позиции после перезагрузки страницы

Question

Сама задача сделать перетаскиваемые блоки как в блок схеме соединенные линиями, код работает но почему то сохраняет в памяти только положение трех блоков после перезагрузки системы ошибок в отладчике браузера не показывает, и не добавляет к блокам draggable_4,draggable_5 и тд положение по style элемента...

  var positions = JSON.parse(localStorage.positions || "{}");
  
  
  // Example 3: инициализация
  var arrowsDrawer3 = $cArrows('#ex3-common-parent', { render:{lineWidth: 3,strokeStyle: '#992E2E'}});
  
  // Example 3: рисование стрелок
  arrowsDrawer3.arrow('.ex3-ceo','.ex3-coo', {arrow: {arrowType: 'double-headed'}, render: { strokeStyle: '#617783'}})
  .arrow('.ex3-ceo','.ex3-dep')
  .arrow('.ex3-coo','.ex3-dep-emp', {
      arrow: {
        connectionType: 'side',
        sideFrom: 'right',
        sideTo: 'top'
      }});
  
  // Example 3: draggable
  $(function() {
    $( "#ex3-common-parent .col-xs-3" ).draggable({
      containment: "#ex3-common-parent",
      scroll: false,
      handle: ".btn",
      drag: function( event, ui ) {
        positions[this.id] = ui.position;
            localStorage.positions = JSON.stringify(positions);
        arrowsDrawer3.redraw();
      }
    });
  });
  
$(function () {
    var d = $("[id=draggable]").attr("id", function (i) {
        return "draggable_" + i
    })
    $.each(positions, function (id, pos) {
        $("#" + id).css(pos);
        arrowsDrawer3.redraw();
    })

    d.draggable({
        containment: "#ex3-common-parent .col-xs-3",
        scroll: false,
        drag: function (event, ui) {
            positions[this.id] = ui.position
            localStorage.positions = JSON.stringify(positions);
            arrowsDrawer3.redraw();
             
        }
    });
});

Html

    <body  id="ex3-common-parent">
     
    
     <div id="draggable" class="col-xs-3 ui-draggable ui-widget-content draggable loc1e">
      <div  class="nft btn  btn-block ex3-ceo" >
       <p> test</p>
      </div>
     
    
 <div id="draggable" class="col-xs-3 ui-draggable  draggable"> 
  <div class="nft btn ex3-dep">
    <p> test</p>
    </div>
  </div></div>
    
     <div id="draggable" class="col-xs-3 ui-draggable  draggable"> 
      <div class="nft btn ex3-dep">
        <p> test</p>
        </div>
      </div></div>

 <div id="draggable" class="col-xs-3 ui-draggable  draggable"> 
  <div class="nft btn ex3-dep">
    <p> test</p>
    </div>
  </div></div>
</body>

плагин стрелок : https://michael.verhov.com/ru/post/canvas_arrows_for_div

БЛОГ НА HUSL

Drag and Drop Jquery блоки соединенные линиями с сохранением позиции после перезагрузки страницы

Ответы (0 шт):