Ajouter des points de terminaison à une division à l'aide de jsPlumb

Question

Je travaille avec la bibliothèque jsPlumb où j'ai une boîte à outils dans laquelle je dois glisser et déposer des éléments sur le conteneur, puis fournir une option permettant aux utilisateurs de connecter les éléments déposés dans le conteneur .

Je suis actuellement capable de faire glisser et déposer un élément. Mais ce que je dois faire ici est de laisser tomber l'élément avec les connecteurs/points de terminaison (ancres).

J'ai défini les propriétés du connecteur comme suit.

jsPlumb.ready(function() { 

    jsPlumb.setContainer($('#container')); 

    //Connector Defaults 
    var connectorProperties = { 
      isTarget:true, 
      isSource:true, 
      maxConnections:-1, 
      anchors:["Left","Right"], 
      endpoint:["Dot",{ 
       radius:4 
      }], 
      connector:["Flowchart"], 
      connectorStyle:{ 
       strokeStyle:"5c96bc", 
       linewidth:1, 
       outlineColor:"transparent", 
       outlineWidth:4 
      }, 
      paintStyle:{ 
       fillStyle:"transparent" 
      }, 
      hoverPaintStyle: { 
       fillStyle:"FF0000" 
      } 
    }; 

Et une fois le premier élément supprimé, j'ai défini les propriétés du connecteur sur cet élément déposé.

drop: function (e, ui) { 

    var mouseTop = e.clientY; 
    var mouseLeft = e.clientX; 

    var dropElem = ui.draggable.attr('class'); 
    droppedElement = ui.helper.clone(); 
    ui.helper.remove(); 
    $(droppedElement).removeAttr("class"); 
    $(droppedElement).draggable({containment: "container"}); 
    jsPlumb.repaint(ui.helper); 


    //If the dropped Element is a TABLE then-> 
    if (dropElem == "stream ui-draggable ui-draggable-handle") { 
     var newAgent = $('<div>'); 
     jsPlumb.addEndpoint(newAgent,connectorProperties); 
     newAgent.attr('id', i).addClass('streamdrop'); 
     var elemType = "table"; 
     $("#container").addClass("disabledbutton"); 
     $("#toolbox").addClass("disabledbutton"); 

     $('#container').append(newAgent); 

Mais je n'arrive pas à voir les connecteurs sur l'élément déposé. Seul le div streamdrop est supprimé sur le conteneur et le conteneur et la boîte à outils sont désactivés en fonction du code déclaré qui suit le code d'ajout du connecteur ci-dessus.

Toutes les suggestions sur la raison pour laquelle je ne peux pas voir les connecteurs/points de terminaison sur l'élément abandonné et comment résoudre cette erreur sera très appréciée.

Answer 1

Je pense que vous avez fait beaucoup de choses qui ne sont pas nécessaires. Suggestion Utilisez - jsPlumb.addEndpoint ($ (dropElement), connectorProperties); Pouvez-vous créer un violon pour une meilleure compréhension.

var newAgent = $ (''); jsPlumb.addEndpoint (newAgent, connectorProperties);