Loading...

XML

Word

Printable

Details

Type: Bug
Resolution: Done
Priority: P2: Important
Fix Version/s: 5.0.0
Affects Version/s: 5.0.0
Component/s: QML: Declarative and Javascript Engine
Labels:
None
Environment:
Mac OS 10.6.8

Description

Run the following code, taken from examples/qtquick/draganddrop/views.

If you do a very slight drag upwards on any item outside of the first column, other items in the view will quickly jump (as if you were moving that item to a space at the top of its column) and then jump back to their positions. This jump doesn't occur if you drag one of the items in the first column.

See attached demo where the pink square, second along the bottom row, is dragged. This produces the following output that is triggered by DropArea.onEntered:

move 13 13
move 13 1
move 1 1
move 1 13

Sample code as follows:

import QtQuick 2.0

GridView {
    id: root
    width: 360; height: 360
    cellWidth: 90; cellHeight: 90

    displaced: Transition {
        NumberAnimation { properties: "x,y"; easing.type: Easing.OutQuad }
    }

    model: VisualDataModel {
        id: visualModel
        model: ListModel {
            id: colorModel
            ListElement { color: "blue" }
            ListElement { color: "green" }
            ListElement { color: "red" }
            ListElement { color: "yellow" }
            ListElement { color: "orange" }
            ListElement { color: "purple" }
            ListElement { color: "cyan" }
            ListElement { color: "magenta" }
            ListElement { color: "chartreuse" }
            ListElement { color: "aquamarine" }
            ListElement { color: "indigo" }
            ListElement { color: "black" }
            ListElement { color: "chartreuse" }
            ListElement { color: "violet" }
            ListElement { color: "grey" }
            ListElement { color: "springgreen" }
        }

        delegate: MouseArea {
            id: delegateRoot

            property int visualIndex: VisualDataModel.itemsIndex

            width: 90; height: 90
            drag.target: icon

            Rectangle {
                id: icon
                width: 80; height: 80
                anchors {
                    horizontalCenter: parent.horizontalCenter;
                    verticalCenter: parent.verticalCenter
                }
                color: model.color
                radius: 3

                Drag.active: delegateRoot.drag.active
                Drag.source: delegateRoot
                Drag.hotSpot.x: 40
                Drag.hotSpot.y: 40

                states: [
                    State {
                        when: icon.Drag.active
                        ParentChange {
                            target: icon
                            parent: root
                        }

                        AnchorChanges {
                            target: icon;
                            anchors.horizontalCenter: undefined;
                            anchors.verticalCenter: undefined
                        }
                    }
                ]
            }

            DropArea {
                anchors { fill: parent; margins: 15 }

                onEntered: {
                    console.log("move", drag.source.visualIndex, delegateRoot.visualIndex)
                    visualModel.items.move(drag.source.visualIndex, delegateRoot.visualIndex)
                }
            }
        }
    }
}