[QML] GridView scroll + Drag&Drop



  • Hi everyone!

    I need to scroll autimatically my gridview during the "onEntered" event,
    because my gridview contains about 600 items, and it's so hard to drag on top of the view the last item (for example)
    So i need a way to do this!
    here's my code

    ScrollView{
                        id:scrollViewer
                        anchors.fill: parent
    
                        GridView {
    
                            property bool firstVisualIndexEnableChange: (bookListModel.mainFilter === "all")
                            id: gridroot
                            clip: true
    //                        highlightRangeMode: ListView.StrictlyEnforceRange
    //                        onCurrentIndexChanged: {
    
    //                            //if(firstVisualIndexEnableChange)
    //                                //bookListModel.firstVisibleIndex = currentIndex
    //                        }
    
    
    
                            onContentYChanged: {
                                console.log("contentY changed "+ contentY )
                            }
    
                            snapMode: GridView.SnapOneRow
    
                            anchors.fill: parent
                            cellWidth: 320; cellHeight: 220
                            displaced: Transition {
                                NumberAnimation { properties: "x,y"; easing.type: Easing.OutQuad }
                            }
                            model: DelegateModel {
                                id: visualModel
    
                                model: bookListModel
                                delegate: MouseArea {
                                    id: delegateRoot
                                    width: gridroot.cellWidth; height: gridroot.cellHeight
                                    property int visualIndex: DelegateModel.itemsIndex
                                    drag.target: icon
                                    Rectangle {
                                        id: icon
                                        width: 300; height: 200
                                        border.color: "black"
                                        border.width: 8
                                        anchors {
                                            horizontalCenter: parent.horizontalCenter;
                                            verticalCenter: parent.verticalCenter
                                        }
                                        color: "white" //model.color
                                        Drag.active: bookListModel.booksOrderEnabled? delegateRoot.drag.active : false
                                        Drag.source: delegateRoot
                                        Drag.hotSpot.x: 36
                                        Drag.hotSpot.y: 36
                                        states: [
                                            State {
                                                when: icon.Drag.active
                                                ParentChange {
                                                    target: icon
                                                    parent: gridroot
                                                }
    
                                                AnchorChanges {
                                                    target: icon;
                                                    anchors.horizontalCenter: undefined;
                                                    anchors.verticalCenter: undefined
                                                }
                                            }
                                        ]
                                        Rectangle{
                                            width:150
                                            height:200
                                            MouseArea{
                                                cursorShape: "PointingHandCursor"
                                                width:parent.width
                                                height: parent.height
                                                onClicked: {
                                                    console.log("BookSelected: "+ isbn + coverImg.source)
                                                    bookShelfcontroller.bookClicked(isbn)
                                                }
                                                Image{
                                                    id:coverImg
                                                    source: coverAbsolutePath //"/images/placeholder_cover.png"
                                                }
                                            }
                                        }
                                        Column{
                                            x:150
                                            width:150
                                            Rectangle{
                                                y: 10
                                                width: 150
                                                height: 160
                                                Rectangle{
                                                    anchors.fill: parent
                                                    anchors.margins: 10
                                                    Text {
                                                        id: bookAuthor
                                                        text: author
                                                        font.family: avenirCn.name
                                                        font.pixelSize: 13
                                                        lineHeightMode: Text.FixedHeight
                                                        lineHeight: 20
                                                        wrapMode: Text.Wrap
                                                        width: parent.width
                                                        maximumLineCount: 3
                                                        anchors.top: parent.top
                                                    }
                                                    Text {
                                                        id:bookTitle;
                                                        text: title
                                                        font.family: avenirBoldCn.name
                                                        font.pixelSize: 13
                                                        lineHeightMode: Text.FixedHeight
                                                        lineHeight: 20
                                                        wrapMode: Text.Wrap
                                                        width: parent.width
                                                        height: parent.height - bookAuthor.height
                                                        elide: Text.ElideRight
                                                        anchors.top: bookAuthor.bottom
                                                    }
                                                }
                                            }
    
                                            Rectangle{
                                                width: 150
                                                height: 40
    
                                                BookButton {
                                                    id:downloadButton
                                                    visible: downloaded
                                                    anchors.right: markerButton.left
                                                }
                                                BookButton {
                                                    id:markerButton
                                                    imgWidth: 16
                                                    source: "icons/marker.svg"
                                                    selected: last_viewed
                                                    visible: lastVisitedPage != ""
                                                    anchors.right: favoriteButton.left
                                                    cursorShape: "PointingHandCursor"
                                                    onClicked: bookShelfcontroller.onLastPageVisitedClicked(lastVisitedPage,isbn)
                                                }
                                                BookButton {
                                                    id:favoriteButton
                                                    anchors.right: parent.right
                                                    selected: favorite
                                                    source: "icons/favorites-xlarge.svg"
                                                    cursorShape: "PointingHandCursor"
                                                    onClicked:{
                                                        favorite = !favorite;
                                                        bumbumcha()
                                                    }
                                                }
                                            }
                                        }
                                    }
    
                                    DropArea {
                                        anchors { fill: parent; margins: 15 }
                                        onEntered:{
                                            if(bookListModel.booksOrderEnabled){
                                                bookListModel.move(drag.source.visualIndex, delegateRoot.visualIndex)
                                                visualModel.items.move(drag.source.visualIndex, delegateRoot.visualIndex)
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }    
    

    Thanks in advanced
    GG.


Log in to reply
 

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