Manipuler les connexions entre les éléments déposés sur le canevas

Ici, j'ai pu déposer des éléments sur une toile et créer des liens entre eux. Mais chaque fois que je fais glisser un élément déposé dans la toile, les ancres ne bougent pas avec l'élément déplacé. Au lieu de cela, lorsque j'essaie de créer une connexion entre l'ancre isolée et un autre élément, elle se repositionne immédiatement avec son élément parent. C'est un problème et je voudrais également supprimer les ancres/connexions chaque fois que son élément parent est supprimé.Manipuler les connexions entre les éléments déposés sur le canevas

<!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>

Source

2016-05-18 Nayantara Jeyaraj

Bienvenue dans Stackoverflow. Veuillez également partager les extraits de code pertinents. – Daenarys

J'ai fourni le code modifié ci-dessus. J'ai été capable d'assigner des ID uniques aux éléments abandonnés et de créer des connexions. Maintenant, la question que je traite est mentionné ci-dessus dans la question –

Afin de manipuler correctement les connexions, vous pouvez utiliser les points d'ancrage connect method in jsPlumb placer aux points souhaités.

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

Ceci est simplement un exemple. Suivre ce modèle dans votre implémentation sera utile quand il s'agit d'accéder aux détails concernant ces connexions et de supprimer les connexions à côté des éléments

Source

2016-09-05 10:06:48

Manipuler les connexions entre les éléments déposés sur le canevas

Répondre

Questions connexes