jsPlumb: Endpunkte falsche Position

Question

Dojo verwenden, programmatisch Ich erstelle Box und platziere sie im inneren div des Hauptdivs nach dem Platzieren der Boxen Ich benutze addEndpoint(), um Endpunkte zu meiner Box hinzuzufügen, Problem ist die Endpunkte sind nicht in der richtigen Position platzieren. meine Codes Hier sind

<div data-dojo-attach-point="containerNode" class="divCenter navEditorDiv" style=""> 
<button data-dojo-attach-event="onClick: showPopOut" data-dojo-attach-point="createNode" 
     class="btn btn-primary fa fa-plus-square position" style=""></button> 

<div data-dojo-attach-point="navigationNode"></div> </div> 

oben Code mein HTML ist

jsplumbInstance: function() { 
     if (!this._instance) { 
      this._instance = jsPlumb.getInstance({ 
       // default drag options 
       DragOptions: {cursor: 'pointer', zIndex: 2000}, 
       // the overlays to decorate each connection with. note that the label overlay uses a function to generate the label text; in this 
       // case it returns the 'labelText' member that we set on each connection in the 'init' method below. 
       ConnectionOverlays: [ 
        ["Arrow", { 
         location: 1, 
         visible: true, 
         id: "ARROW", 
         /* events:{ 
         click:function() { alert("you clicked on the arrow overlay")} 
         }*/ 
        }], 
        ["Label", { 
         location: 0.8, 
         id: "label", 
         cssClass: "aLabel fa fa-times", 
         /*events:{ 
         tap:function() { jsPlumb.remove("label");} 
         }*/ 
        }] 
       ], 

       Container: this.navigationNode 
      }); 

     } 
     return this._instance; 
    }, 

obige Code ist meine jsPlumb Instanz, in der "Container" auf innerDiv Dojo gesetzt Punkt

leftEndPoints: function() { 
     connectorPaintStyle = { 
      lineWidth: 4, 
      strokeStyle: "#61B7CF", 
      joinstyle: "round", 
      outlineColor: "white", 
      outlineWidth: 2 
     }, 
      // .. and this is the hover style. 
      connectorHoverStyle = { 
       lineWidth: 4, 
       strokeStyle: "#216477", 
       outlineWidth: 2, 
       outlineColor: "white" 
      }, 
      endpointHoverStyle = { 
       fillStyle: "#216477", 
       strokeStyle: "#216477" 
      }; 
     var sourceEndpoint = { 
      anchor: "RightMiddle", 
      endpoint: "Dot", 
      paintStyle: { 
       strokeStyle: "#7AB02C", 
       fillStyle: "transparent", 
       radius: 7, 
       lineWidth: 3 
      }, 
      isSource: true, 
      connector: ["Flowchart", {stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true}], 
      connectorStyle: connectorPaintStyle, 
      hoverPaintStyle: endpointHoverStyle, 
      connectorHoverStyle: connectorHoverStyle, 
      deleteEndpointsOnDetach: false, 
      dragOptions: {}, 
      maxConnections: -1, 
      overlays: [ 
       ["Label", { 
        location: [0.5, 1.5], 
        label: "Drag", 
        cssClass: "endpointSourceLabel", 
        visible: false 
       }] 
      ], 
     }; 
     return sourceEndpoint; 
    }, 

oben befestigen Code ist mein jsPlumb Endpunkt

domConstruct.place(rootWidget.boxNode, that.navigationNode); 
that.jsplumbInstance().addEndpoint(rootWidget.boxNode,that.leftEndPoints()); 

Verwenden von Dojo domConstruct.place Ich platziere Box in innerDiv und nach der Platzierung füge ich Endpunkte hinzu.

Bitte helfen Sie mir, es zu beheben.

Screenshots von falscher Position

Erwartetes Ergebnis Screenshot

Answer 1

Sie können Sie übergeordnete Container mit Stil position: absolute; beheben diese eingestellt.