<f-flow fDraggable (fLoaded)="onLoaded()">
  <f-canvas>
    <f-connection fOutputId="output1" fInputId="input1"></f-connection>

    <div fNode fDragHandle
         [fNodePosition]="{ x: 0, y: 0 }" fNodeOutput fOutputId="output1" fOutputConnectableSide="bottom">
      Drag me
    </div>

    <div fNode [fNodePosition]="{ x: 0, y: 150 }" fNodeInput fInputId="input1" fInputConnectableSide="top">
      This node doesn’t have a drag handle
    </div>


    <f-connection fOutputId="output2" fInputId="input2"></f-connection>

    <div fNode fDragHandle
         [fNodePosition]="{ x: 200, y: 0 }">
      Drag me
      <div fNodeOutput fOutputId="output2" fOutputConnectableSide="bottom"></div>
    </div>

    <div fNode fDragHandle [fNodeDraggingDisabled]="true"
         [fNodePosition]="{ x: 200, y: 150 }">
      Dragging is disabled
      <div fNodeInput fInputId="input2" fInputConnectableSide="top"></div>
    </div>
  </f-canvas>
</f-flow>