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



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

  • Moderators

    @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.



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


  • Moderators

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



  • @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


  • Moderators

    @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 ?



  • @p3c0
    inside the same application


  • Moderators

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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.