How can I drag a item from one page to another with listview and gridview?

[beidaochuan]

Hello,
How can I drag a item from one page to another page with listview and gridview ?
or other methods ?
Appreciate if there is any example .
this is my code.

IFlickView.qml

import QtQuick 2.3
import QtQml.Models 2.1

Item {
    id: root

    property int currentIndex: 0
    default property alias content: visualModel.children

    ListView {
        id: list
        anchors.fill: parent

        currentIndex: root.currentIndex
        onCurrentIndexChanged: root.currentIndex = currentIndex

        orientation: Qt.Horizontal
        boundsBehavior: Flickable.DragOverBounds
        model: ObjectModel { id: visualModel }

        highlightRangeMode: ListView.StrictlyEnforceRange
        snapMode: ListView.SnapOneItem
    }

    Rectangle {
        width: root.width; height: 20
        anchors { bottom: parent.bottom }

        Row {
            anchors.centerIn: parent
            spacing: 20

            Repeater {
                model: list.count

                Rectangle {
                    width: 5; height: 5
                    radius: 3
                    color: list.currentIndex == index ? "blue" : "lightsteelblue"

                    MouseArea {
                        width: 20; height: 20
                        anchors.centerIn: parent
                        onClicked: list.currentIndex = index
                    }
                }
            }
        }
    }
}

IGridView.qml

import QtQuick 2.3
import QtQml.Models 2.1

GridView {
    id: gridViewRoot
    width: 320
    height: 480
    cellWidth: 80
    cellHeight: 80
    property var listmode: ListModel
    property int gridId: 0
    displaced: Transition {
        NumberAnimation { properties: "x,y"; easing.type: Easing.OutQuad }
    }

    model: DelegateModel {
        id: visualModel
        property bool animRun: false
        property bool animRun1: false
        model: listmode

        delegate: MouseArea {
            id: delegateRoot
            property int visualIndex: DelegateModel.itemsIndex
            property bool isPressAndHold: false

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

            onPressAndHold: {
                isPressAndHold = true
                visualModel.animRun = true
            }

            onReleased: {
                isPressAndHold = false
                visualModel.animRun = false
                visualModel.animRun1 = true
                visualModel.animRun1 = false
            }

            Rectangle {
                id: icon
                width: 72; height: 72
                anchors {
                    horizontalCenter: parent.horizontalCenter;
                    verticalCenter: parent.verticalCenter
                }
                color: model.color
                radius: 3
                Text {
                    id: text1
                    width: icon.width
                    height: 30
                    text :model.text
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    font.pixelSize: 20
                    anchors {
                        top: icon.bottom
                        topMargin: 3
                        horizontalCenter: icon.horizontalCenter
                    }
                }

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

                states: [
                    State {
                        when: icon.Drag.active && isPressAndHold
                        ParentChange {
                            target: icon
                            parent: gridview1
                        }

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

            DropArea {
                anchors {
                    fill: parent
                    margins: 15
                }

                onEntered: {
                    console.debug("drag.x:" + drag.x)
                    console.debug("drag.y:" + drag.y)
                    console.debug("drag.z:" + drag.z)
                    visualModel.items.move(drag.source.visualIndex, delegateRoot.visualIndex)
//                    gridId = drag.source.visualIndex
                    console.debug("drag.source.visualIndex = " + drag.source.visualIndex)
                    console.debug("delegateRoot.visualIndex = " + delegateRoot.visualIndex)
                    console.debug("gridId = " + gridId)
                }
            }

            SequentialAnimation {
                id: seqAnim
                running: visualModel.animRun
                loops: Animation.Infinite
//                alwaysRunToEnd: true
                // left → right
                NumberAnimation {
                    id: anim
                    target: icon
                    property : "rotation"
                    from: -5
                    to: 5
                    duration: 150
                }
                NumberAnimation {
                    id: anim1
                    target: icon
                    property : "rotation"
                    from: 5
                    to: -5
                    duration: 150
                }
            }

            NumberAnimation {
                id: anim2
                target: icon
                property : "rotation"
                running: visualModel.animRun1
                from: 0
                to: -0
                duration: 150
            }
        }
    }
}

[p3c0]

@beidaochuan According to QTBUG-41133 external drag-drop still doesnot work atleast on Ubuntu. You can try it on other OS.
You can find an example in <QTDIR>/Examples/Qt-5.4/quick/externaldraganddrop on your system.

[beidaochuan]

@p3c0 Thanks for your apply and I uploaded some codes. Could you give me some advices?

[p3c0]

@beidaochuan Will these 2 QML's be run as different applications ?

[beidaochuan]

@p3c0 said:

applications

in other file, they are referenced.
NgRcu.qml

Rectangle {
        id: baseMain
        width: parent.width
        anchors.top: baseTop.bottom
        anchors.bottom: baseBottom.top
        color: "#00000000"
        IFlickView {
            id: flickView
            currentIndex: 1
            anchors.fill: parent

            Item {
                x: 0
                y: 0
                width: window.width
                height: window.height - baseTop.height - baseBottom.height
                BmStatistics {
                    id: fMain3
                    anchors.fill: parent
                }
            }

           Item {
                x: 0
                y: 0
                width: window.width
                height: window.height - baseTop.height - baseBottom.height
                BmPresetDetail {
                    id: fMain2
                    anchors.fill: parent
                }
            }
        }
    }

BmPresetDetail and BmStatistics files include the IGridview.qml

[p3c0]

@beidaochuan First please add your code after ```(3 backticks) and end with the same. I have added it for you. The rules are at the bottom of this page.
Will these files NgRcu.qml and BmPresetDetail and BmStatistics inside the same application or different ?

[beidaochuan]

@p3c0
inside the same application

[p3c0]

@beidaochuan honestly speaking its difficult to go through this big code. Can you somehow minimize it which will show the actual problem ?