title: Not able to cancel the drag when we exit mouse area
body: <p>I have an slider and an image used for sliding over the slider as shown below.</p>
  
  <pre><code>Image
  {
      id: slideImg
      source:  "/slider/SliderSelected.png"
      width: 65
      height: 65
  
      onDragActiveChanged:
      {
  
  
          if (!dragActive )
          {
              main.selection (x + slideImg.width/2 , true);
          }
  
      }
    property bool dragActive: dragArea.drag.active
  
  }
  </code></pre>
  
  <p>The mouseArea looks like this :</p>
  
  <pre><code>MouseArea
  {
      id: dragArea
      anchors.fill: thumb
      enabled: !isDisabled
      height: 65
      width: 463
      drag
      {
          readonly property int dragThreshold: 10
          target: thumb
          minimumX: 0
          minimumY: 0
          maximumY:100
  
          maximumX: mainElement.width - thumb.width
          axis: Drag.XAxis
          threshold: dragThreshold
      }
      onCanceled: {
          console.log("onCanceled ")
  
      }
      onExited: {
          console.log("onExited ")
          Drag.cancel()
      }
  
  
  }
  </code></pre>
  
  <p>When i hold the sliderImage and slide it outside the area of the slider i would want to cancel the drag . The drag area should be limited to the mouse area .If we move out of the mouse area i would want to cancel the drag . But the Drag.cancel() is not cancelling the drag . Is there any way to cancel the drag?</p>