[Solved] GridView unexpectedly jumps to the end



  • Hi,

    I am running in a problem with the GridView when implementing a piece of code to support draggable items. The idea is that a list of items is displayed in a GridView and user can press and hold one item to move and exchange its position with another similar item in the same GridView. Everything is working fine if the GridView is not scrollable, e.g, interactive is set to false. However, when I have more items than the GridView visible area can fit and the GridView becomes scrollable, whenever I exchange the positions of two items and then scroll the GridView, it unexpectedly jumps to the bottom. I then try to flick it back but it jumps back to the bottom again and doesn't return,e.g, the contentY is changed permanently and can't flick to change it back to 0. Following is my piece of code:

    @
    DraggableContainer {
    id: dragContainer
    anchors.fill: parent

     DraggableGridView {
          id: gridView
    
          anchors.fill: parent
          cellWidth: 260
          cellHeight: 128
          cacheBuffer: cellHeight * (model.count/(width/cellWidth) + 1) + 60
    
          model: itemsModel
          delegate: DraggableItem {
               Rectangle {
                   width: gridView.cellWidth
                   height: gridView.cellHeight
                   color: model.color
              }
         }
    }
    

    }
    @

    The DraggableContainer is the where all the logic of dragging takes place. It detects the mouse press, mouse release and mouse move events as well as the draggable item being selected to exchange its position with another one. Any ideas?

    Br,
    Phi



  • Forgot to mention that it only happens when reordering the first and the last items of GridView. For the first item, the GridView jumps to the bottom end, and for the last item, it jumps to the top end.



  • Sorted out the issue by myself. The problem is because DraggableItem is made as the root item of the GridView delegate. Nesting it in another item does the trick. The code similar to the following would work. Thanks!

    @
    delegate: Item {
    DraggableItem {
    Rectangle {
    width: gridView.cellWidth
    height: gridView.cellHeight
    color: model.color
    }
    }
    }
    @


Log in to reply
 

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