title: QML Flickable Issues
body: <p>I need a horizontal controller consisting of a background and moving thumb-stick.  It requires the following behaviours:</p>
  
  <ol>
  <li>Initially centred, the thumb-stick can drag to the left or right within the background bounds.</li>
  <li>When the drag is released, the thumb-stick re-centres itself.</li>
  <li>If a part of the background is touched, the thumb-stick jumps to the touch.</li>
  <li>If the touch is released, the thumb-stick re-centres itself.</li>
  <li>If a drag is made following the touch, the thumb-stick will drag from the touched position.</li>
  </ol>
  
  <p>Problems:</p>
  
  <ol>
  <li><p>On touch, the thumb-stick jumps to the TouchPoint as required. However if a drag immediately follows the touch, the thumb-stick jumps back to the position it was in before the touch, before initiating the drag.</p></li>
  <li><p>If the thumb-stick is dragged to the right and released, it immediately jumps back to centre as required.  If it is dragged to the left boundary, there is a delay before it jumps back to centre.</p></li>
  </ol>
  
  <p>Running the below code illustrates the controller working and the problems:</p>
  
  <pre><code>import QtQuick 2.0
  
  Item {
  id: horizontalController
  width: 300
  height: 100   
  
  Rectangle {
      id: controllerBackground
      width: (parent.width / 3) * 2
      height: parent.height
      anchors.centerIn: parent
      color: "white"
  }
  Flickable
  {
      id: controllerFlick
      width: parent.width / 3 * 2
      height: parent.height
      anchors.centerIn: parent
      contentX: width / 4
      contentWidth: bounds.width
      contentHeight:  bounds.height
      boundsBehavior: Flickable.StopAtBounds
  
      onMovementEnded: {
          contentX = width / 4
      }
  
      MultiPointTouchArea{
          id: controllerTouchArea
          enabled: true
          anchors.fill: bounds
          touchPoints: TouchPoint {id: controllerTouchPoint }
          onPressed: {
              controllerFlick.contentX = Math.min(Math.max(controllerBackground.width - controllerTouchPoint.x,0),controllerBackground.width / 2)
          }
          onReleased: {
              controllerFlick.contentX = controllerFlick.width / 4
          }
      }
  
      Item{
          id: bounds
          width: controllerFlick.width * 1.5
          height: controllerFlick.height
          Rectangle {
              id: image
              width: parent.width / 3
              height: parent.height
              anchors.centerIn: parent
              color: "red"
          }
      }
     }
  }
  </code></pre>