Time for action – dragging an item around

Create a new Qt Quick UI project. Modify the default code by discarding the existing child items and adding a circle instead:

Rectangle {
  id: circle
  width: 60; height: width
  radius: width/2
  color: "red"
}

Next, use the drag property of MouseArea to enable moving the circle by touch (or mouse):

MouseArea {
  anchors.fill: parent
  drag.target: circle
}

Then, you can start the application and begin moving the circle around.

What just happened?

A circle was created by defining a rectangle with its height equal to width, making it a square and rounding the borders to half the side length. The drag property can be used to tell MouseArea to manage a given item's position using input events flowing into the area element. We denote the item to be dragged by using the target subproperty. You can use other subproperties to control the axis the item is allowed to move along or constrain the move to a given area. An important thing...