Game Programming Using Qt Beginner's Guide

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. ...