jsPlumb：端點錯誤的位置

以編程方式使用Dojo創建框並將其放置在放置框後的主div的內部div中我利用addEndpoint（）將端點添加到我的框中，問題是端點是沒有擺在正確的位置。這裏是我的代碼jsPlumb：端點錯誤的位置

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

上面的代碼是我jsPlumb例如在「容器」設置爲innerDiv道場連接點

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

以上代碼是我的jsPlumb端點

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

使用Dojo domConstruct.place我將文本框放在innerDiv中，放置後向端點添加端點。

請幫我解決它。

截圖錯了位置的

預期結果的截圖

來源

2016-05-13 Amit Poojary

你可以設置你的風格 position: absolute;父容器來解決這個問題。

來源

2017-04-13 04:11:07 user3268360

jsPlumb：端點錯誤的位置

回答

相關問題