--- /dev/null
+TEMPLATE = app
+
+QT += quick declarative
+SOURCES += main.cpp
+
+target.path = $$[QT_INSTALL_EXAMPLES]/qtdeclarative/qtquick/draganddrop
+qml.files = draganddrop.qml tiles views
+qml.path = $$[QT_INSTALL_EXAMPLES]/qtdeclarative/qtquick/draganddrop
+INSTALLS += target qml
+
--- /dev/null
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+** * Redistributions of source code must retain the above copyright
+** notice, this list of conditions and the following disclaimer.
+** * Redistributions in binary form must reproduce the above copyright
+** notice, this list of conditions and the following disclaimer in
+** the documentation and/or other materials provided with the
+** distribution.
+** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+** the names of its contributors may be used to endorse or promote
+** products derived from this software without specific prior written
+** permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import "../../shared" as Examples
+
+/*!
+ \title QtQuick Examples - Drag and Drop
+ \example qtquick/draganddrop
+ \brief This is a collection of QML drag and drop examples
+ \image qml-draganddrop-example.png
+
+ This is a collection of small QML examples relating to drag and drop functionality.
+
+ Tiles adds drag and drog to simple rectangles, which you can drag into a specific grid.
+
+ GridView adds drag and drog to a GridView, allowing you to reorder the list.
+*/
+
+Item {
+ height: 480
+ width: 320
+ Examples.LauncherList {
+ id: ll
+ anchors.fill: parent
+ Component.onCompleted: {
+ addExample("Tiles", "", Qt.resolvedUrl("tiles/tiles.qml"));
+ addExample("GridView", "", Qt.resolvedUrl("views/gridview.qml"));
+ }
+ }
+}
import QmlProject 1.0
Project {
+ mainFile: "draganddrop.qml"
/* Include .qml, .js, and image files from current directory and subdirectories */
+
QmlFiles {
directory: "."
}
--- /dev/null
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+** * Redistributions of source code must retain the above copyright
+** notice, this list of conditions and the following disclaimer.
+** * Redistributions in binary form must reproduce the above copyright
+** notice, this list of conditions and the following disclaimer in
+** the documentation and/or other materials provided with the
+** distribution.
+** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+** the names of its contributors may be used to endorse or promote
+** products derived from this software without specific prior written
+** permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#include "../../shared/shared.h"
+DECLARATIVE_EXAMPLE_MAIN(draganddrop)
id: root
property string colorKey
- width: 100; height: 100
+ width: 64; height: 64
MouseArea {
id: mouseArea
- width: 100; height: 100
+ width: 64; height: 64
anchors.centerIn: parent
drag.target: tile
Rectangle {
id: tile
- width: 100; height: 100
+ width: 64; height: 64
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.horizontalCenter: parent.horizontalCenter
- anchors.horizontalCenter: parent.horizontalCenter; anchors.verticalCenter: parent.verticalCenter
color: colorKey
Drag.keys: [ colorKey ]
Drag.active: mouseArea.drag.active
- Drag.hotSpot.x: 50
- Drag.hotSpot.y: 50
+ Drag.hotSpot.x: 32
+ Drag.hotSpot.y: 32
Text {
anchors.fill: parent
color: "white"
- font.pixelSize: 90
+ font.pixelSize: 48
text: modelData + 1
horizontalAlignment:Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
property string colorKey
property alias dropProxy: dragTarget
- width: 100; height: 100
+ width: 64; height: 64
keys: [ colorKey ]
Rectangle {
Rectangle {
id: root
- width: 620
- height: 410
+ width: 320
+ height: 480
color: "black"
anchors.left: redSource.right; anchors.top: parent.top;
anchors.margins: 5
- width: 300
- height: 300
+ width: 64*3
+ height: 64*3
opacity: 0.5
columns: 3
Grid {
anchors.right: blueSource.left; anchors.bottom: parent.bottom;
anchors.margins: 5
- width: 300
- height: 300
+ width: 64*3
+ height: 64*3
opacity: 0.5
anchors.left: parent.left; anchors.top: parent.top; anchors.bottom: parent.bottom
anchors.margins: 5
- width: 100
- spacing: -60
+ width: 64
+ spacing: -16
Repeater {
model: 9
anchors.right: parent.right; anchors.top: parent.top; anchors.bottom: parent.bottom
anchors.margins: 5
- width: 100
- spacing: -60
+ width: 64
+ spacing: -16
Repeater {
model: 9
GridView {
id: root
- width: 360; height: 360
- cellWidth: 90; cellHeight: 90
+ width: 320; height: 480
+ cellWidth: 80; cellHeight: 80
model: VisualDataModel {
id: visualModel
ListElement { color: "aquamarine" }
ListElement { color: "indigo" }
ListElement { color: "black" }
- ListElement { color: "chartreuse" }
+ ListElement { color: "lightsteelblue" }
ListElement { color: "violet" }
ListElement { color: "grey" }
ListElement { color: "springgreen" }
+ ListElement { color: "salmon" }
+ ListElement { color: "blanchedalmond" }
+ ListElement { color: "forestgreen" }
+ ListElement { color: "pink" }
+ ListElement { color: "navy" }
+ ListElement { color: "goldenrod" }
+ ListElement { color: "crimson" }
+ ListElement { color: "teal" }
}
delegate: MouseArea {
property int visualIndex: VisualDataModel.itemsIndex
- width: 90; height: 90
+ width: 80; height: 80
drag.target: icon
Rectangle {
id: icon
- width: 80; height: 80
+ width: 72; height: 72
anchors {
horizontalCenter: parent.horizontalCenter;
verticalCenter: parent.verticalCenter
Drag.active: delegateRoot.pressed
Drag.source: delegateRoot
- Drag.hotSpot.x: 40
- Drag.hotSpot.y: 40
+ Drag.hotSpot.x: 36
+ Drag.hotSpot.y: 36
states: [
State {
TEMPLATE = subdirs
SUBDIRS = accessibility \
- animation
+ animation \
+ draganddrop
#canvas \
- #draganddrop \
#imageelements \
#keyinteraction \
#modelviews \