jsPlumb：エンドポイントの位置が間違っています

Question

Dojoを使用してプログラムでボックスを作成し、ボックスを配置した後にメインdivの内部divに配置します。addEndpoint（）を使用してエンドポイントをボックスに追加します。正しい位置に配置されていません。ここ は私のコードのコード上記

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

ある私のHTMLコードを上記

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; 
    }, 

は点以上

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; 
    }, 

を添付して "コンテナ" がinnerDiv道場に設定されている私のjsPlumbインスタンスですコードは私のjsPlumbエンドポイントです

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

Dojo domConstruct.placeを使用しています。私はinnerDivにボックスを配置し、配置した後にエンドポイントを追加します。

私はそれを修正するのを助けてください。

誤った位置のスクリーンショット

期待される結果のスクリーンショット

Answer 1

あなたはあなたにこの問題を解決するスタイル position: absolute;を持つ親コンテナを設定することができます。