Drag and drop in Qt Quick (drag and drop)

The drag and drop function in Qt Quick is studied, probably speaking.

Class Library

Qt quick is related to drag and drop, and there are several classes of libraries:

• Droparea
• Dragevent
• Drag

Droparea

Droparea is actually a convenient class, it is not visible, but defines an area that can receive drag and drop. Its entered signal is emitted when an object is dragged into the area, the exited signal is emitted when the object is dragged out of the area, and the positionchanged signal is continuously emitted when the object is dragged back and forth in the area, and the dropped signal is emitted when the user releases the object.

The Containsdrag property is a Boolean value that indicates whether an object is currently dragged in its own jurisdiction. We can use this to show what the point is to indicate the drag, and the instance to be used.

Droparea also has some attributes, not to mention it, use to see help it.

Dragevent

Dragevent, look at the name must also be able to think of what it is. Yes, it is a description of the information about a drag event, Droparea entered, positionchanged, dropped signal parameters are dragevent.

Dragevent a lot of properties, let's pick a few to talk about.

• Accepted: Indicates whether to accept the Boolean value of the event, and if you have processed the entered signal, you need to set it to true.
• X, y: Drag the position of the event, you can show what the point is based on it, and our example shows a rectangle that follows.
• Action: Drag the source is executing the identity of the action, there are qt.copyaction, Qt.moveaction, qt.linkaction, qt.ignoreaction four kinds, words too literally can.
• Proposedactions: Recommended set of actions.
• Supportedactions: Source-supported set of actions

Other properties, such as Hascolor, Hasurls, HasText, hashtml, and so on, are used to determine whether or not a certain data is carried when dragging, and the corresponding properties of Colordata, URLs, text, and HTML are represented International data.

Dragevent also defines a number of methods:

• Accept: Call it to receive an action, such as you accept Qt.copyaction
• Accept (): Accepts the drag event, indicating that you have handled the event.
• Acceptproposedaction (): Accept the action suggested by the dragged animal body (source)
• Getdataasstring (format): Gets the data for a format and converts it to a string, which is used in our instance to extract the transmitted data

Drag

Drag This class is typically attached to an Item that may be dragged to set some drag-related information.

It provides a number of additional properties, and picks up some explanations:

• Active: Indicates whether the current is in a drag state. We can bind this property to a Mousearea drag property, which creates a drag event when the user drags the mouse. Of course you can also manually set it to true, which produces a drag entry event with the current position of the dragged Item. If you set active to false, a drag leave event is generated.
• Dragtype: An enumeration value that represents the drag type, which can be drag.none (does not start dragging automatically), drag.automatic (automatically starts dragging), drag.internal (automatically starts a forward-compatible drag). We've used this, and we'll see the code later.
• Mimedata: Store MIME data and custom data, which can be passed to Droparea. Qt Quick will pack the data defined by Mimedata into the dragevent and travel around with it, and anyone interested can look at it.
• Supportedactions: Specifies the supported actions. Corresponds to the Droparea received by the Dragevent Supportedactions.
• Proposedactions: Specifies the recommended action. Corresponds to the Droparea received by the Dragevent Proposedactions.
• Source: Specifies the dragged source object
• Target: When Active is true (the drag is active), this property holds the Droparea that was dragged into the body, and if dragged physically and no one is intersecting, it is null. If the drag is not activated, it saves the last object that accepts the drop event, and if no one has ever provoked the dragged animal, the target is null

Drag also has some additional signals that allow us to improve our understanding of the drag process, such as dragstarted, dragfinished.

Drag also provides methods such as Cancel, drop, start, and StartDrag, which allow us to manually control the drag.

Sample drag and Drop Swatch

Ape, on the code.

Example Logic and effects

Wait, look at the humble interface first.

The top of the interface is some color blocks, only support qt.copyaction, the mouse can be dragged, drag them into the light blue area below. Is the effect after drag and drop:

Once the color block is dragged and dropped into the light blue area, I dynamically create a rectangle that supports qt.moveaction, copying the size, color, and other parameters of the dragged rectangle. These newly created Rectangle in the blue area can be moved.

Here's the code.

Import QtQuick 2.3import Qtquick.window 2.2Window {id:root;    Visible:true;    width:480;    height:400; Drag source item should not use anchors to layout!        Or drag would failed Component {id:dragcolor;            Rectangle {id:dragitem;            x:0;            y:0;            width:60;            height:60;            Drag.active:dragArea.drag.active;            Drag.supportedActions:Qt.CopyAction;            Drag.dragType:Drag.Automatic;            Drag.mimedata: {"Color": Color, "width": width, "height": height};                Mousearea {Id:dragarea;                Anchors.fill:parent;                Drag.target:parent; Onreleased: {if (parent.                        Drag.supportedactions = = qt.copyaction) {dragitem.x = 0;                    DRAGITEM.Y = 0;        }}}}} Row {id:dragsource;     Anchors.top:parent.top;   Anchors.left:parent.left;        Anchors.margins:4;        Anchors.right:parent.right;        height:64;        Spacing:4;        Z:-1;            Loader {width:60;            height:60;            Z:2;            Sourcecomponent:dragcolor;        OnLoaded:item.color = "Red";            } Loader {width:60;            height:60;            Z:2;            Sourcecomponent:dragcolor;        OnLoaded:item.color = "BLACK";            } Loader {width:60;            height:60;            Z:2;            Sourcecomponent:dragcolor;        OnLoaded:item.color = "Blue";            } Loader {width:60;            height:60;            Z:2;            Sourcecomponent:dragcolor;        OnLoaded:item.color = "green";        }} droparea {Id:dropcontainer;        Anchors.top:dragSource.bottom;        Anchors.left:parent.left;        Anchors.right:parent.right; Anchors.bottom:parent. Bottom;        Z:-1;            Onentered: {drag.accepted = true;            Followarea.color = drag.getdataasstring ("color");        Console.log ("onentered, formats-", Drag.formats, "action-", drag.action);            } onpositionchanged: {drag.accepted = true;            followarea.x = drag.x-4;        FOLLOWAREA.Y = drag.y-4;            } ondropped: {Console.log ("ondropped-", drop.proposedaction);            Console.log ("Data-", drop.getdataasstring ("color"));            Console.log ("Event.x-", drop.x, "Y", drop.y);            Console.log ("event class =", drop);                                                     if (drop.supportedactions = = qt.copyaction) {var obj = Dragcolor.createobject (destarea,{                                                     "X": drop.x, "y": drop.y,                "width": parseint (drop.getdataasstring ("width")),                                     "Height": parseint (drop.getdataasstring ("height")), "Color": drop.getdataasstring ("Color"), "Drag.suppo                                                 Rtedactions ": qt.moveaction," Drag.dragtype ": drag.internal            });  }else if (drop.supportedactions = = qt.moveaction) {Console.log ("Move action, Drop.source-", Drop.source, "            Drop.source.source-", Drop.source.source);            } drop.acceptproposedaction ();        Drop.accepted = true;            } Rectangle {Id:followarea;            Z:2;            width:68;            height:68;            Border.width:2;            Border.color: "Yellow";        Visible:parent.containsDrag;            } Rectangle {Id:destarea;            Anchors.fill:parent; Color: "LIghtsteelblue ";            Border.width:2; Border.color:parent.containsDrag?        "Blue": "Gray"; }    }}

The code is not too much, see for yourself just fine.

About MIME, I don't know how to build types and data in QML ...

About Mimedata, it's actually a qvariantmap, and after I've been trying to make mistakes, I've found that I can use the literal notation of the object to assign it, like this:

Drag.mimedata: {"Color": Color, "width": width, "height": height};

And we get the data passed by the dragged element in the ondropped signal processor of the Droparea object through the Dragevent getdataasstring, like this:

parseint (drop.getdataasstring ("width")

actually similar to Key-value.

All right, that's it.

Look back at my QT Quick Series articles:

• About Qt Quick
• QML Language Basics
• Qt Quick's Hello World text
• Qt Quick Simple Tutorial
• The signal and slot of Qt Quick event processing
• Qt Quick Event Processing mouse, keyboard, timer
• Pinch scaling and rotation of Qt Quick event processing
  
• Qt Quick component and Object dynamic creation
  
• Introduction to Qt Quick layout
• Qt Quick's QML and C + + mixed programming
• Qt Quick Image Processing example of beauty 美图秀秀 (with source download)
• Qt Quick's Pathview detailed
• Qt Quick Example Digging avatar
• A file viewer for the Qt quick Synthesis instance
• QT Quick Debug Display code line number
• Qt Quick implementation of graffiti program
• Qt Quick Play GIF animation

Drag and drop in Qt Quick (drag and drop)