[Solved] GridView unexpectedly jumps to the end

ngocketit

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

ngocketit

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.

ngocketit

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