Drag QML Type | Qt Quick | Qt 6.11.0
Description: For specifying drag and drop events for moved Items.

- Qt 6.11
- Qt Quick
- QML Types
- Drag
- Qt 6.11.0 Reference Documentation

# Drag QML Type

For specifying drag and drop events for moved Items. More...

Import Statement: | `import QtQuick`

- List of all members, including inherited members

## Attached Properties

- active : bool
- dragType : enumeration
- hotSpot : point
- imageSource : url
- imageSourceSize : size `(since 6.8)`
- keys : stringlist
- mimeData : var
- proposedAction : enumeration
- source : Object
- supportedActions : flags
- target : Object

## Attached Signals

- dragFinished(DropAction dropAction)
- dragStarted()

## Attached Methods

- void cancel()
- enumeration drop()
- void start(flags supportedActions)
- void startDrag(flags supportedActions)

## Detailed Description

Using the Drag attached property, any Item can be made a source of drag and drop events within a scene.

When a drag is active on an item, any change in that item's position will generate a drag event that will be sent to any DropArea that intersects with the new position of the item. Other items which implement drag and drop event handlers can also receive these events.

The following snippet shows how an item can be dragged with a MouseArea. However, dragging is not limited to mouse drags; anything that can move an item can generate drag events, including touch events, animations and bindings.

     import QtQuick

     Item {
         width: 200; height: 200

         DropArea {
             x: 75; y: 75
             width: 50; height: 50

             Rectangle {
                 anchors.fill: parent
                 color: "green"

                 visible: parent.containsDrag
             }
         }

         Rectangle {
             x: 10; y: 10
             width: 20; height: 20
             color: "red"

             Drag.active: dragArea.drag.active
             Drag.hotSpot.x: 10
             Drag.hotSpot.y: 10

             MouseArea {
                 id: dragArea
                 anchors.fill: parent

                 drag.target: parent
             }
         }
     }

A drag can be terminated either by canceling it with Drag.cancel() or setting Drag.active to false, or it can be terminated with a drop event by calling Drag.drop(). If the drop event is accepted, Drag.drop() will return the drop action chosen by the recipient of the event, otherwise it will return Qt.IgnoreAction.

See also Qt Quick Examples - Drag and Drop.

## Attached Property Documentation

### Drag.active : bool `[read-only]`

This property holds whether a drag event sequence is currently active.

Binding this property to the active property of MouseArea::drag will cause startDrag to be called when the user starts dragging.

Setting this property to true will also send a QDragEnter event to the scene with the item's current position. Setting it to false will send a QDragLeave event.

While a drag is active any change in an item's position will send a QDragMove event with item's new position to the scene.

### Drag.dragType : enumeration

This property indicates whether to automatically start drags, do nothing, or to use backwards compatible internal drags. The default is to use backwards compatible internal drags.

A drag can also be started manually using startDrag.

Constant | Description
--- | ---
`Drag.None` | do not start drags automatically
`Drag.Automatic` | start drags automatically
`Drag.Internal` | (default) start backwards compatible drags automatically

When using `Drag.Automatic` you should also define mimeData and bind the active property to the active property of MouseArea : MouseArea::drag.active

### Drag.hotSpot : point

This property holds the drag position relative to the top left of the item.

By default this is (0, 0).

Changes to hotSpot trigger a new drag move with the updated position.

### Drag.imageSource : url

This property holds the URL of the image which will be used to represent the data during the drag and drop operation. Changing this property after the drag operation has started will have no effect.

The example below uses an item's contents as a drag image:

     import QtQuick

     Item {
         width: 200; height: 200

         Rectangle {
             anchors.centerIn: parent
             width: text.implicitWidth + 20; height: text.implicitHeight + 10
             color: "green"
             radius: 5

             Drag.dragType: Drag.Automatic
             Drag.supportedActions: Qt.CopyAction
             Drag.mimeData: {
                 "text/plain": "Copied text"
             }

             Text {
                 id: text
                 anchors.centerIn: parent
                 text: "Drag me"
             }

             DragHandler {
                 id: dragHandler
                 onActiveChanged:
                     if (active) {
                         parent.grabToImage(function(result) {
                             parent.Drag.imageSource = result.url
                             parent.Drag.active = true
                         })
                     } else {
                         parent.Drag.active = false
                     }
             }
         }
     }

See also Item::grabToImage().

### Drag.imageSourceSize : size `[since 6.8]`

This property holds the size of the image that will be used to represent the data during the drag and drop operation. Changing this property after the drag operation has started will have no effect.

This property sets the maximum number of pixels stored for the loaded image so that large images do not use more memory than necessary. See Image.sourceSize for more details.

The example below shows an SVG image rendered at one size, and re-renders it at a different size for the drag image:

     import QtQuick

     Item {
         width: 200; height: 200

         Image {
             anchors.centerIn: parent
             source: "images/qt_logo.svg"
             sourceSize.width: 96

             Drag.dragType: Drag.Automatic
             Drag.supportedActions: Qt.CopyAction
             Drag.mimeData: {
                 "text/plain": "Qt Quick rocks!"
             }
             Drag.imageSource: "images/qt_logo.svg"
             Drag.imageSourceSize: Qt.size(48, 35)
             Drag.active: dragHandler.active

             DragHandler {
                 id: dragHandler
             }
         }
     }

This property was introduced in Qt 6.8.

See also imageSource and Item::grabToImage().

### Drag.keys : stringlist

This property holds a list of keys that can be used by a DropArea to filter drag events.

Changing the keys while a drag is active will reset the sequence of drag events by sending a drag leave event followed by a drag enter event with the new source.

### Drag.mimeData : var

This property holds a map from mime type to data that is used during startDrag. The mime data needs to be of a type that matches the mime type (e.g. a string if the mime type is "text/plain", or an image if the mime type is "image/png"), or an `ArrayBuffer` with the data encoded according to the mime type.

### Drag.proposedAction : enumeration

This property holds an action that is recommended by the drag source as a return value from Drag.drop().

Changes to proposedAction will trigger a move event with the updated proposal.

### Drag.source : Object

This property holds an object that is identified to recipients of drag events as the source of the events. By default this is the item that the Drag property is attached to.

Changing the source while a drag is active will reset the sequence of drag events by sending a drag leave event followed by a drag enter event with the new source.

### Drag.supportedActions : flags

This property holds return values of Drag.drop() supported by the drag source.

Changing the supportedActions while a drag is active will reset the sequence of drag events by sending a drag leave event followed by a drag enter event with the new source.

### Drag.target : Object

While a drag is active this property holds the last object to accept an enter event from the dragged item, if the current drag position doesn't intersect any accepting targets it is null.

When a drag is not active this property holds the object that accepted the drop event that ended the drag, if no object accepted the drop or the drag was canceled the target will then be null.

## Attached Signal Documentation

### dragFinished(DropAction dropAction)

This signal is emitted when a drag finishes and the drag was started with the startDrag() method or started automatically using the dragType property.

dropAction holds the action accepted by the target item.

Note: The corresponding handler is `onDragFinished`.

See also drop().

### dragStarted()

This signal is emitted when a drag is started with the startDrag() method or when it is started automatically using the dragType property.

Note: The corresponding handler is `onDragStarted`.

## Attached Method Documentation

### void cancel()

Ends a drag sequence.

### enumeration drop()

Ends a drag sequence by sending a drop event to the target item.

Returns the action accepted by the target item. If the target item or a parent doesn't accept the drop event then Qt.IgnoreAction will be returned.

The returned drop action may be one of:

Constant | Description
--- | ---
`Qt.CopyAction` | Copy the data to the target
`Qt.MoveAction` | Move the data from the source to the target
`Qt.LinkAction` | Create a link from the source to the target.
`Qt.IgnoreAction` | Ignore the action (do nothing with the data).

### void start(flags supportedActions)

Starts sending drag events. Used for starting old-style internal drags. startDrag is the new-style, preferred method of starting drags.

The optional supportedActions argument can be used to override the supportedActions property for the started sequence.

### void startDrag(flags supportedActions)

Starts sending drag events.

The optional supportedActions argument can be used to override the supportedActions property for the started sequence.