Манипулирование связей между элементами, опущенными на холст

Здесь я смог отбросить элементы на холст и создать соединения между ними. Но каждый раз, когда я перетаскиваю выпавший элемент внутри холста, привязки не перемещаются вместе с перетаскиваемым элементом. Вместо этого, когда я пытаюсь создать соединение с изолированным привязкой к другому элементу, он немедленно переопределяет себя со своим родительским элементом. Это одна из проблем, и я также хотел бы удалить привязки/соединения всякий раз, когда его родительский элемент будет удален.Манипулирование связей между элементами, опущенными на холст

<!doctype html> 
<html> 
<head> 

    <script src="../lib/jquery.min.js"></script> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="../lib/jquery-ui.min.js"></script> 
    <script src="../lib/jquery.jsPlumb-1.6.4-min.js"></script> 

    <style> 
     .chevron-toolbox{ 
      position: absolute; 
      width: 72px; 
      height: 80px; 
      background-color: powderblue; 
      background-image: url("../dist/img/bigdot.png"); 
      border: solid 3px red; 
     } 

     #dropArea{ 
      cursor: pointer; 
      border: solid 1px gray; 
      width: 800px; 
      margin-left: 80px; 
      height: 400px; 
      position: relative; 
      overflow-x: scroll; 
      overflow-y: scroll; 
     } 

     .chevron { 

      position:absolute; 
      cursor:pointer; 
      width: 72px; 
      height: 80px; 
      background-color: powderblue; 
      background-image: url("../dist/img/bigdot.png"); 

     } 

    </style> 
</head> 
<body> 
    <div class="chevron-toolbox" id="cId"> 
    </div> 
    <div id="dropArea"> 
    </div> 

    <button id="go">Double Click Me</button> 
    <script> 
     jsPlumb.ready(function(e) 
     { 
      jsPlumb.setContainer($('#dropArea')); 
      $(".chevron-toolbox").draggable 
      ({ 
       helper : 'clone', 
       cursor : 'pointer', 
       tolerance : 'fit', 
       revert : true 

      }); 

      $("#dropArea").droppable 
      ({ 
       accept : '.chevron-toolbox', 
       containment : 'dropArea', 

       drop : function (e, ui) { 
        droppedElement = ui.helper.clone(); 
        ui.helper.remove(); 
        $(droppedElement).removeAttr("class"); 
        jsPlumb.repaint(ui.helper); 
        $(droppedElement).addClass("chevron"); 
        $(droppedElement).draggable({containment: "dropArea"}); 
        $(droppedElement).appendTo('#dropArea'); 
        setId(droppedElement); 
        var droppedId = $(droppedElement).attr('id'); 
        var common = { 
         isSource:true, 
         isTarget:true, 
         connector: ["Flowchart"], 
        }; 

        jsPlumb.addEndpoint(droppedId, { 
         anchors:["Right"] 
        }, common); 

        jsPlumb.addEndpoint(droppedId, { 
         anchors:["Left"] 
        }, common); 
        alert(droppedId); 

        //Delete an element on double click 
        var dataToPass = {msg: "Confirm deletion of Item"}; 
        $(droppedElement).dblclick(dataToPass, function(event) { 
         alert(event.data.msg); 
         $(this).remove(); 
        }); 



       } 

      }); 

      //Set a unique ID for each dropped Element 
      var indexer = 0; 
      function setId(element){ 
       indexer++; 
       element.attr("id",indexer); 

      } 

     }); 

    </script> 
</body> 
</html>

источник

2016-05-18 Nayantara Jeyaraj

Добро пожаловать в Stackoverflow. Пожалуйста, поделитесь также соответствующими фрагментами кода. – Daenarys

Я представил модифицированный код выше. Я смог назначить уникальные идентификаторы упавшим элементам и создать соединения. Теперь проблема, о которой я говорю, упоминается выше в вопросе –

Для того, чтобы правильно манипулировать соединения, вы можете использовать connect method in jsPlumb размещение якоря в нужных точках.

jsPlumb.connect({ 
    source:'window2', 
    target:'window3', 
    paintStyle:{lineWidth:8, strokeStyle:'rgb(189,11,11 )'}, 
    anchors:["Bottom", "Top"], 
    endpoint:"Rectangle" 
});

Это всего лишь пример. Следуя этой схеме в вашей реализации будет полезно, когда речь заходит о доступе к деталям относительно этих соединений и удалении соединений рядом с элементами.

источник

2016-09-05 10:06:48

Манипулирование связей между элементами, опущенными на холст

ответ

Смежные вопросы