View Full Version : Animation on ListView::move

2nd March 2011, 15:40
Hi guys,

I am trying in implement some sort of animation on the "move" method of a ListModel.

Please see below my code:

import Qt 4.7

Rectangle {
width: 300
height: 342

ListModel {
id: listModel
rectangleColor: "red"
rectangleColor: "green"
rectangleColor: "blue"

Component {
id: delegate

Rectangle {
id: redRect
width: 200
height: 62
color: rectangleColor

MouseArea {
anchors.fill: parent
drag.target: redRect
drag.axis: "YAxis"
onClicked: {
listModel.move(index, index + 1, 1)

// Behavior on y { NumberAnimation{} }

ListView {
interactive: false
spacing: 10
anchors.fill: parent
model: listModel
delegate: delegate

But I am stuck here, I don't even know if the direction that I am going is good.
Is it ok that I used a ListView? Would you suggest something different?

My final goal is to be able to select/drag one item from the listview and to rearrange the items. The behavior is similar to how the Google Chrome tabs are rearranging themselves when trying to move one tab.

Any idea about the direction that I should proceed is welcome.

Thanks in advance,

Added after 25 minutes:

I just found this: http://developer.qt.nokia.com/wiki/Drag_and_Drop_within_a_GridView

I am pretty sure that I can adjust it for using a ListView.

I will post the solution here if succeeded :)


9th March 2011, 09:47
<ItemsPanelTemplate x:Key="ItemsPanelTemplate">
<il:FluidMoveBehavior AppliesTo="Children" Duration="00:00:00.75"/>