examples/declarative/dragtarget/lists/listmodel.qml

   1 /****************************************************************************
   2 **
   3 ** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
   4 ** All rights reserved.
   5 ** Contact: Nokia Corporation (qt-info@nokia.com)
   6 **
   7 ** This file is part of the examples of the Qt Toolkit.
   8 **
   9 ** $QT_BEGIN_LICENSE:BSD$
  10 ** You may use this file under the terms of the BSD license as follows:
  11 **
  12 ** "Redistribution and use in source and binary forms, with or without
  13 ** modification, are permitted provided that the following conditions are
  14 ** met:
  15 **   * Redistributions of source code must retain the above copyright
  16 **     notice, this list of conditions and the following disclaimer.
  17 **   * Redistributions in binary form must reproduce the above copyright
  18 **     notice, this list of conditions and the following disclaimer in
  19 **     the documentation and/or other materials provided with the
  20 **     distribution.
  21 **   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
  22 **     the names of its contributors may be used to endorse or promote
  23 **     products derived from this software without specific prior written
  24 **     permission.
  25 **
  26 ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  27 ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  28 ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  29 ** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  30 ** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  31 ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  32 ** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  33 ** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  34 ** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  35 ** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  36 ** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
  37 ** $QT_END_LICENSE$
  38 **
  39 ****************************************************************************/
  40
  41 import QtQuick 2.0
  42
  43
  44 Rectangle {
  45     id: root
  46     color: "grey"
  47
  48     width: 720
  49     height: 380
  50
  51     Component {
  52         id: draggedText
  53         Text {
  54             x: rootTarget.dragX - 10
  55             y: rootTarget.dragY - 10
  56             width: 20
  57             height: 20
  58
  59             text: rootTarget.dragData.display
  60             font.pixelSize: 18
  61         }
  62     }
  63
  64     DragTarget {
  65         id: rootTarget
  66
  67         anchors.fill: parent
  68     }
  69
  70     Loader {
  71         anchors.fill: parent
  72         sourceComponent: rootTarget.containsDrag ? draggedText : undefined
  73     }
  74
  75     GridView {
  76         id: gridView
  77
  78         width: 240
  79         height: 360
  80
  81         anchors.left: parent.left
  82         anchors.verticalCenter: parent.verticalCenter
  83         anchors.margins: 10
  84
  85         cellWidth: 60
  86         cellHeight: 60
  87
  88         model: ListModel {
  89             id: gridModel
  90
  91             ListElement { display: "1" }
  92             ListElement { display: "2" }
  93             ListElement { display: "3" }
  94             ListElement { display: "4" }
  95             ListElement { display: "5" }
  96             ListElement { display: "6" }
  97             ListElement { display: "7" }
  98             ListElement { display: "8" }
  99             ListElement { display: "9" }
 100             ListElement { display: "10" }
 101             ListElement { display: "11" }
 102             ListElement { display: "12" }
 103             ListElement { display: "13" }
 104             ListElement { display: "14" }
 105             ListElement { display: "15" }
 106             ListElement { display: "16" }
 107             ListElement { display: "17" }
 108             ListElement { display: "18" }
 109             ListElement { display: "19" }
 110             ListElement { display: "20" }
 111             ListElement { display: "21" }
 112             ListElement { display: "22" }
 113             ListElement { display: "23" }
 114             ListElement { display: "24" }
 115         }
 116
 117         delegate: Rectangle {
 118             id: root
 119
 120             width: 60
 121             height: 60
 122
 123             color: "black"
 124
 125             Text {
 126                 anchors.fill: parent
 127                 color: draggable.drag.active ? "gold" : "white"
 128                 text: display
 129                 font.pixelSize: 16
 130                 verticalAlignment: Text.AlignVCenter
 131                 horizontalAlignment: Text.AlignHCenter
 132             }
 133
 134             MouseArea {
 135                 id: draggable
 136
 137                 property int initialIndex
 138
 139                 width: 60
 140                 height: 60
 141
 142                 drag.data: model
 143                 drag.keys: ["grid"]
 144                 drag.target: draggable
 145
 146                 states: State {
 147                     when: !draggable.drag.active
 148                     PropertyChanges { target: draggable; x: 0; y: 0 }
 149                 }
 150             }
 151         }
 152
 153         DragTarget {
 154             anchors.fill: parent
 155
 156             keys: [ "grid" ]
 157             onPositionChanged: {
 158                 var index = gridView.indexAt(drag.x, drag.y)
 159                 if (index != -1)
 160                     gridModel.move(drag.data.index, index, 1)
 161             }
 162         }
 163
 164         DragTarget {
 165             property int dragIndex
 166             anchors.fill: parent
 167
 168             keys: [ "list" ]
 169             onEntered: {
 170                 dragIndex = gridView.indexAt(drag.x, drag.y)
 171                 if (dragIndex != -1) {
 172                     gridModel.insert(dragIndex, { "display": drag.data.display })
 173                 } else {
 174                     event.accepted = false
 175                 }
 176             }
 177             onPositionChanged: {
 178                 var index = gridView.indexAt(drag.x, drag.y);
 179                 if (index != -1) {
 180                     gridModel.move(dragIndex, index, 1)
 181                     dragIndex = index
 182                 }
 183             }
 184             onExited: gridModel.remove(dragIndex, 1)
 185         }
 186     }
 187
 188     ListView {
 189         id: listView
 190
 191         width: 240
 192         height: 360
 193
 194         anchors.right: parent.right
 195         anchors.verticalCenter: parent.verticalCenter
 196         anchors.margins: 10
 197
 198         model: ListModel {
 199             id: listModel
 200
 201             ListElement { display: "a" }
 202             ListElement { display: "b" }
 203             ListElement { display: "c" }
 204             ListElement { display: "d"}
 205             ListElement { display: "e" }
 206             ListElement { display: "f" }
 207             ListElement { display: "g" }
 208             ListElement { display: "h" }
 209             ListElement { display: "i" }
 210             ListElement { display: "j" }
 211             ListElement { display: "k" }
 212             ListElement { display: "l" }
 213             ListElement { display: "m" }
 214             ListElement { display: "n" }
 215             ListElement { display: "o" }
 216             ListElement { display: "p" }
 217             ListElement { display: "q" }
 218             ListElement { display: "r" }
 219             ListElement { display: "s" }
 220             ListElement { display: "t" }
 221             ListElement { display: "u" }
 222             ListElement { display: "v" }
 223             ListElement { display: "w" }
 224             ListElement { display: "x" }
 225         }
 226
 227         delegate: Rectangle {
 228             id: root
 229
 230             width: 240
 231             height: 15
 232
 233             color: "black"
 234
 235             Text {
 236                 anchors.fill: parent
 237                 color: draggable.drag.active ? "gold" : "white"
 238                 text: display
 239                 font.pixelSize: 12
 240                 verticalAlignment: Text.AlignVCenter
 241                 horizontalAlignment: Text.AlignHCenter
 242             }
 243
 244             MouseArea {
 245                 id: draggable
 246
 247                 width: 240
 248                 height: 15
 249
 250                 drag.data: model
 251                 drag.keys: ["list"]
 252                 drag.target: draggable
 253
 254                 states: State {
 255                     when: !draggable.drag.active
 256                     PropertyChanges { target: draggable; x: 0; y: 0 }
 257                 }
 258             }
 259         }
 260
 261         DragTarget {
 262             anchors.fill: parent
 263
 264             keys: [ "list" ]
 265             onPositionChanged: {
 266                 var index = listView.indexAt(drag.x, drag.y)
 267                 if (index != -1)
 268                     listModel.move(drag.data.index, index, 1)
 269             }
 270         }
 271
 272         DragTarget {
 273             property int dragIndex
 274             anchors.fill: parent
 275
 276             keys: [ "grid" ]
 277
 278             onEntered: {
 279                 dragIndex = listView.indexAt(drag.x, drag.y)
 280                 if (dragIndex != -1) {
 281                     listModel.insert(dragIndex, { "display": drag.data.display })
 282                 } else {
 283                     event.accepted = false
 284                 }
 285             }
 286             onPositionChanged: {
 287                 var index = listView.indexAt(drag.x, drag.y);
 288                 if (index != -1) {
 289                     listModel.move(dragIndex, index, 1)
 290                     dragIndex = index
 291                 }
 292             }
 293             onExited: listModel.remove(dragIndex, 1)
 294         }
 295     }
 296 }