研究了一下 Qt Quick 里的 drag and drop 功能，大概讲一下。
Qt Quick与 drag and drop 相关的，有这么几个类库：
DropArea 其实是个方便类，它不可见，但是定义了一个可以接收拖放的区域。它的 entered 信号在有物体被拖入区域时发射，exited 信号在物体被拖出区域时发射，当物体在区域内被拖着来回移动时会不断发射 positionChanged 信号，当用户释放了物体，dropped 信号被发射。
containsDrag 属性是个布尔值，指示自己的辖区内当前是否有物体被拖动。我们可以根据这个来显示点什么来表示拖动，待会的实例会用到。
DropArea 还有一些属性，不提也罢，用到了看帮助吧。
DragEvent ，看名字想必也能想到它是干什么的了。没错，它就是描述一个拖动事件的相关信息的， DropArea 的 entered 、 positionChanged 、 dropped 信号的参数都是 DragEvent 。
DragEvent 属性很多，我们挑几个说说吧。
其它的属性还有 hasColor 、 hasUrls 、 hasText 、 hasHtml 等等与 MIME 相关的属性用来判断在拖动时是否携带了某种数据，对应的就有 colorData 、 urls 、 text 、 html 等属性表示实际的数据。
DragEvent 还定义了一些方法：
Drag 这个类一般是附着在可能被拖动的 Item 上，用来设置一些拖动相关的信息。
它提供很多附加属性，挑一些解释一下：
Drag 还有一些附加信号，可以让我们对拖动的过程增进了解，比如 dragStarted 、 dragFinished 。
Drag 也提供了一些方法，如 cancel 、 drop 、 start 、 startDrag ，允许我们手动控制拖动。
阿猿，上代码咧。
等等，先看下粗陋的界面吧。
界面顶部是一些色块，只支持 Qt.CopyAction ，鼠标可以拖动，把它们拖到下面的浅蓝色区域内。下图是拖放后的效果：
一旦色块被拖放到浅蓝色区域，我会动态创建一个支持 Qt.MoveAction 的矩形，复制拖放的矩形的大小、颜色等参数。这样蓝色区域内新创建的这些 Rectangle 就可以被移动。
import QtQuick 2.3
import QtQuick.Window 2.2
Window {
id: root;
visible: true;
width: 480;
height: 400;
//drag source item should not use anchors to layout! or drag will 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.supportedActions": 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";
}
}
}关于 MIME ，我没搞清楚在 QML 中怎么构建类型和数据……
关于 mimeData ，它实际上是一个 QVariantMap ，经过我不断地试错，发现可以用对象的字面量表示法来为其赋值，就像这样：
Drag.mimeData: {"color": color, "width": width, "height": height};parseInt(drop.getDataAsString("width")好了，就这么着了，到这里吧。
回顾一下我的Qt Quick系列文章：
原文地址：http://blog.csdn.net/foruok/article/details/41747085
