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：端点错误的位置

回答

相关问题