title: How to move/animate components created by repeater in QML?
body: <p>I have a component named <code>Tile</code> in Tile.qml, which I want to create by a Repeater. Tile.qml is as follows:</p>
  
  <pre><code>import QtQuick 2.0
  
  Rectangle {
      id: tile
  
      property string tileLabel: label.text
      property int tileSize: height
  
      width: 50
      height: tileSize
      color: "green"
      border.color: Qt.lighter(color)
      anchors.bottom: parent.bottom
  
      Text {
          id: label
          color: "white";
          anchors.horizontalCenter: parent.horizontalCenter
          anchors.top: parent.bottom
          text: tileLabel
      }
  }
  </code></pre>
  
  <p>And my main.qml is as follows:</p>
  
  <pre><code>import QtQuick 2.0
  
  Rectangle {
      id: root
      width: 552; height: 300
      color: "#3C3C3C"
      border.color: Qt.lighter(color)
  
      Row {
          id: tilesRow
          anchors.margins: 8
          anchors.horizontalCenter: parent.horizontalCenter
          anchors.verticalCenter: parent.verticalCenter
          spacing: 4
          Repeater {
              id: repeater
              model: 10
              delegate: Tile {
                  tileSize: Math.random() * 100 + 1
                  tileLabel: tileSize
              }
          }
      }
  
      Rectangle {
          id: button
          width: 100
          height: 30
          color: "gray"
          focus: true
  
          Text {
              anchors.centerIn: parent
              color: "white"
              text: "Button"
          }
          MouseArea {
              hoverEnabled: true
              anchors.fill: parent
              onEntered: { button.color = Qt.lighter("blue")}
              onExited: { button.color = "gray" }
              onPressed: { button.color = "blue" }
              onReleased: { button.color = Qt.lighter("blue") }
              onClicked: func()
          }
      }
  }
  </code></pre>
  
  <p>I need to sort the tiles when the button is clicked so that the tiles are in ascending order by their labels. I can access the labels of the tiles using <code>repeater.itemAt(i).tileSize</code>. How can I animate the movement of tiles as they are moved/swapped?</p>