Animation on ListView::move

[wladek]

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
        ListElement{
            rectangleColor: "red"
        }
        ListElement{
            rectangleColor: "green"
        }
        ListElement{
            rectangleColor: "blue"
        }
    }
 
    Component {
        id: delegate
 
        Rectangle {
            id: redRect
            width: 200
            height: 62
            color: rectangleColor
            clip:true
 
            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
    }
}

import Qt 4.7

Rectangle {
    width: 300
    height: 342

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

    Component {
        id: delegate

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

            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
    }
}

To copy to clipboard, switch view to plain text mode 

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,
Wladek

---

Added after 25 minutes:

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

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

I will post the solution here if succeeded

Regards,
Wladek

[harpreets]

<ItemsPanelTemplate x:Key="ItemsPanelTemplate">
<WrapPanel>
<i:Interaction.Behaviors>
<il:FluidMoveBehavior AppliesTo="Children" Duration="00:00:00.75"/>
</i:Interaction.Behaviors>
</WrapPanel>
</ItemsPanelTemplate>