Drag and Drop within a GridView: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
No edit summary
Line 1: Line 1:
'''English''' | [[Drag and Drop within a GridView Japanese|日本語]] | [[Drag and Drop within a GridView Bulgarian|Български]]
[[Category:snippets]]<br />[[Category:Developing_with_Qt::Qt Quick]]<br />[[Category:Developing_with_Qt::Qt Quick::QML]]<br />[[Category:Developing_with_Qt::Qt Quick::Tutorial]]<br />'''English''' | [[Drag_and_Drop_within_a_GridView_Japanese|日本語]] | [[Drag_and_Drop_within_a_GridView_Bulgarian|Български]]


This wiki entry is created in response to a few forum threads (links at bottom) asking for this method. Feel free to contribute to this article with explanations or code.
This wiki entry is created in response to a few forum threads (links at bottom) asking for this method. Feel free to contribute to this article with explanations or code.


=Drag and Drop within a GridView=
= Drag and Drop within a GridView =


This example will demonstrate the iOS style ([http://www.youtube.com/watch?v=qnXoGnUU6uI video here] ''[youtube.com]'' ) of dragging and dropping ListModel elements within a GridView.
This example will demonstrate the iOS style (&quot;video here&amp;quot;:http://www.youtube.com/watch?v=qnXoGnUU6uI ) of dragging and dropping ListModel elements within a GridView.


There are three files in this example. One for the model (WidgetModel.qml), one for the delegate (IconItem.qml) and one for the GridView (Main.qml).
There are three files in this example. One for the model (WidgetModel.qml), one for the delegate (IconItem.qml) and one for the GridView (Main.qml).


'''WidgetModel.qml'''<br />
'''WidgetModel.qml'''<br /><code>import QtQuick 1.0


'''IconItem.qml'''<br />
ListModel {<br /> ListElement { icon: &quot;Images/widget1.png&amp;quot;; gridId: 0}<br /> ListElement { icon: &quot;Images/widget2.png&amp;quot;; gridId: 1}<br /> ListElement { icon: &quot;Images/widget3.png&amp;quot;; gridId: 2}<br /> ListElement { icon: &quot;Images/widget4.png&amp;quot;; gridId: 3}<br /> ListElement { icon: &quot;Images/widget5.png&amp;quot;; gridId: 4}<br /> ListElement { icon: &quot;Images/widget6.png&amp;quot;; gridId: 5}<br /> ListElement { icon: &quot;Images/widget7.png&amp;quot;; gridId: 6}<br /> ListElement { icon: &quot;Images/widget8.png&amp;quot;; gridId: 7}<br /> ListElement { icon: &quot;Images/widget9.png&amp;quot;; gridId: 8}<br />}</code>


'''Main.qml'''<br />
'''IconItem.qml'''<br /><code>import QtQuick 1.0


'''Video'''<br />
Component {<br /> Item {<br /> id: main<br /> width: grid.cellWidth; height: grid.cellHeight<br /> Image {<br /> id: item; parent: loc<br /> x: main.x + 5; y: main.y + 5<br /> width: main.width - 10; height: main.height - 10;<br /> fillMode: Image.PreserveAspectFit; smooth: true<br /> source: icon<br /> Rectangle {<br /> anchors.fill: parent;<br /> border.color: &quot;#326487&amp;quot;; border.width: 6<br /> color: &quot;transparent&amp;quot;; radius: 5<br /> visible: item.state  &amp;quot;active&amp;quot;
            &amp;#125;
            Behavior on x &amp;#123; enabled: item.state != &amp;quot;active&amp;quot;; NumberAnimation &amp;#123; duration: 400; easing.type: Easing.OutBack &amp;#125; &amp;#125;
            Behavior on y &amp;#123; enabled: item.state != &amp;quot;active&amp;quot;; NumberAnimation &amp;#123; duration: 400; easing.type: Easing.OutBack &amp;#125; &amp;#125;
            SequentialAnimation on rotation &amp;#123;
                NumberAnimation &amp;#123; to:  2; duration: 60 &amp;#125;
                NumberAnimation &amp;#123; to: -2; duration: 120 &amp;#125;
                NumberAnimation &amp;#123; to:  0; duration: 60 &amp;#125;
                running: loc.currentId != -1 &amp;amp;&amp;amp; item.state != &amp;quot;active&amp;quot;
                loops: Animation.Infinite; alwaysRunToEnd: true
            &amp;#125;
            states: State &amp;#123;
                name: &amp;quot;active&amp;quot;; when: loc.currentId  gridId<br /> PropertyChanges { target: item; x: loc.mouseX - width/2; y: loc.mouseY - height/2; scale: 0.5; z: 10 }<br /> }<br /> transitions: Transition { NumberAnimation { property: &quot;scale&amp;quot;; duration: 200} }<br /> }<br /> }<br />}</code>


Relevant forum threads:<br />[http://developer.qt.nokia.com/forums/viewthread/2327/ iOS Style Rearrange of Icons] ''[developer.qt.nokia.com]''<br />[http://developer.qt.nokia.com/forums/viewthread/2426/ <span class="caps">QML</span> and Drag and Drop] ''[developer.qt.nokia.com]''
'''Main.qml'''<br /><code>import QtQuick 1.0


===Categories:===
Rectangle {<br /> width: 640; height: 480<br /> color: &quot;#222222&amp;quot;<br /> GridView {<br /> id: grid<br /> interactive: false<br /> anchors {<br /> topMargin: 60; bottomMargin: 60<br /> leftMargin: 140; rightMargin: 140<br /> fill: parent<br /> }<br /> cellWidth: 120; cellHeight: 120;<br /> model: WidgetModel { id: icons }<br /> delegate: IconItem { }<br /> MouseArea {<br /> property int currentId: –1 // Original position in model<br /> property int newIndex // Current Position in model<br /> property int index: grid.indexAt(mouseX, mouseY) // Item underneath cursor<br /> id: loc<br /> anchors.fill: parent<br /> onPressAndHold: currentId = icons.get(newIndex = index).gridId<br /> onReleased: currentId = –1<br /> onMousePositionChanged:<br /> if (loc.currentId [[Image:= -1 &amp;&amp; index |= -1 &amp;&amp; index ]]= –1 &amp;&amp; index != newIndex)<br /> icons.move(newIndex, newIndex = index, 1)<br /> }<br /> }<br />}</code>


* [[:Category:Developing with Qt|Developing_with_Qt]]
'''Video'''<br />[YouTubeID:4tt5hQYS4Fo]
** [[:Category:Developing with Qt::Qt-Quick|Qt Quick]]
* [[:Category:Developing with Qt::Qt-Quick::QML|QML]]


* [[:Category:Developing with Qt::Qt-Quick::Tutorial|Tutorial]]
Relevant forum threads:<br />&quot;iOS Style Rearrange of Icons&amp;quot;:http://developer.qt.nokia.com/forums/viewthread/2327/
 
* [[:Category:snippets|snippets]]

Revision as of 08:55, 24 February 2015





English | 日本語 | Български

This wiki entry is created in response to a few forum threads (links at bottom) asking for this method. Feel free to contribute to this article with explanations or code.

Drag and Drop within a GridView

This example will demonstrate the iOS style ("video here&quot;:http://www.youtube.com/watch?v=qnXoGnUU6uI ) of dragging and dropping ListModel elements within a GridView.

There are three files in this example. One for the model (WidgetModel.qml), one for the delegate (IconItem.qml) and one for the GridView (Main.qml).

WidgetModel.qml

import QtQuick 1.0

ListModel {<br /> ListElement { icon: &quot;Images/widget1.png&amp;quot;; gridId: 0}<br /> ListElement { icon: &quot;Images/widget2.png&amp;quot;; gridId: 1}<br /> ListElement { icon: &quot;Images/widget3.png&amp;quot;; gridId: 2}<br /> ListElement { icon: &quot;Images/widget4.png&amp;quot;; gridId: 3}<br /> ListElement { icon: &quot;Images/widget5.png&amp;quot;; gridId: 4}<br /> ListElement { icon: &quot;Images/widget6.png&amp;quot;; gridId: 5}<br /> ListElement { icon: &quot;Images/widget7.png&amp;quot;; gridId: 6}<br /> ListElement { icon: &quot;Images/widget8.png&amp;quot;; gridId: 7}<br /> ListElement { icon: &quot;Images/widget9.png&amp;quot;; gridId: 8}<br />}

IconItem.qml

import QtQuick 1.0

Component {<br /> Item {<br /> id: main<br /> width: grid.cellWidth; height: grid.cellHeight<br /> Image {<br /> id: item; parent: loc<br /> x: main.x + 5; y: main.y + 5<br /> width: main.width - 10; height: main.height - 10;<br /> fillMode: Image.PreserveAspectFit; smooth: true<br /> source: icon<br /> Rectangle {<br /> anchors.fill: parent;<br /> border.color: &quot;#326487&amp;quot;; border.width: 6<br /> color: &quot;transparent&amp;quot;; radius: 5<br /> visible: item.state  &amp;quot;active&amp;quot;
            &amp;#125;
            Behavior on x &amp;#123; enabled: item.state != &amp;quot;active&amp;quot;; NumberAnimation &amp;#123; duration: 400; easing.type: Easing.OutBack &amp;#125; &amp;#125;
            Behavior on y &amp;#123; enabled: item.state != &amp;quot;active&amp;quot;; NumberAnimation &amp;#123; duration: 400; easing.type: Easing.OutBack &amp;#125; &amp;#125;
            SequentialAnimation on rotation &amp;#123;
                NumberAnimation &amp;#123; to:  2; duration: 60 &amp;#125;
                NumberAnimation &amp;#123; to: -2; duration: 120 &amp;#125;
                NumberAnimation &amp;#123; to:  0; duration: 60 &amp;#125;
                running: loc.currentId != -1 &amp;amp;&amp;amp; item.state != &amp;quot;active&amp;quot;
                loops: Animation.Infinite; alwaysRunToEnd: true
            &amp;#125;
            states: State &amp;#123;
                name: &amp;quot;active&amp;quot;; when: loc.currentId  gridId<br /> PropertyChanges { target: item; x: loc.mouseX - width/2; y: loc.mouseY - height/2; scale: 0.5; z: 10 }<br /> }<br /> transitions: Transition { NumberAnimation { property: &quot;scale&amp;quot;; duration: 200} }<br /> }<br /> }<br />}

Main.qml

import QtQuick 1.0

Rectangle {<br /> width: 640; height: 480<br /> color: &quot;#222222&amp;quot;<br /> GridView {<br /> id: grid<br /> interactive: false<br /> anchors {<br /> topMargin: 60; bottomMargin: 60<br /> leftMargin: 140; rightMargin: 140<br /> fill: parent<br /> }<br /> cellWidth: 120; cellHeight: 120;<br /> model: WidgetModel { id: icons }<br /> delegate: IconItem { }<br /> MouseArea {<br /> property int currentId: –1 // Original position in model<br /> property int newIndex // Current Position in model<br /> property int index: grid.indexAt(mouseX, mouseY) // Item underneath cursor<br /> id: loc<br /> anchors.fill: parent<br /> onPressAndHold: currentId = icons.get(newIndex = index).gridId<br /> onReleased: currentId = –1<br /> onMousePositionChanged:<br /> if (loc.currentId [[Image:= -1 &amp;&amp; index |= -1 &amp;&amp; index ]]= –1 &amp;&amp; index != newIndex)<br /> icons.move(newIndex, newIndex = index, 1)<br /> }<br /> }<br />}

Video
[YouTubeID:4tt5hQYS4Fo]

Relevant forum threads:
"iOS Style Rearrange of Icons&quot;:http://developer.qt.nokia.com/forums/viewthread/2327/

Retrieved from "https://wiki.qt.io/index.php?title=Drag_and_Drop_within_a_GridView&oldid=4047"