Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How can I drag a item from one page to another with listview and gridview?
QtWS25 Last Chance

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

Scheduled Pinned Locked Moved QML and Qt Quick
qmllistviewgridview
8 Posts 2 Posters 3.5k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • B Offline
    B Offline
    beidaochuan
    wrote on last edited by p3c0
    #1

    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
                }
            }
        }
    }
    
    p3c0P 1 Reply Last reply
    0
    • B 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
                  }
              }
          }
      }
      
      p3c0P Offline
      p3c0P Offline
      p3c0
      Moderators
      wrote on last edited by
      #2

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

      157

      B 1 Reply Last reply
      0
      • p3c0P 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.

        B Offline
        B Offline
        beidaochuan
        wrote on last edited by
        #3

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

        p3c0P 1 Reply Last reply
        0
        • B beidaochuan

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

          p3c0P Offline
          p3c0P Offline
          p3c0
          Moderators
          wrote on last edited by
          #4

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

          157

          B 1 Reply Last reply
          0
          • p3c0P p3c0

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

            B Offline
            B Offline
            beidaochuan
            wrote on last edited by p3c0
            #5

            @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

            p3c0P 1 Reply Last reply
            0
            • B 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

              p3c0P Offline
              p3c0P Offline
              p3c0
              Moderators
              wrote on last edited by
              #6

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

              157

              B 1 Reply Last reply
              0
              • p3c0P 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 ?

                B Offline
                B Offline
                beidaochuan
                wrote on last edited by
                #7

                @p3c0
                inside the same application

                p3c0P 1 Reply Last reply
                0
                • B beidaochuan

                  @p3c0
                  inside the same application

                  p3c0P Offline
                  p3c0P Offline
                  p3c0
                  Moderators
                  wrote on last edited by
                  #8

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

                  157

                  1 Reply Last reply
                  0

                  • Login

                  • Login or register to search.
                  • First post
                    Last post
                  0
                  • Categories
                  • Recent
                  • Tags
                  • Popular
                  • Users
                  • Groups
                  • Search
                  • Get Qt Extensions
                  • Unsolved