Drag and drop inside GridView: Switch to next page while dragging
-
Hi,
I am trying to do drag and drop inside a gridview. For this I try to follow the drag and drop example of Qt, which is basicallyimport QtQuick 2.12 import QtQml.Models 2.1 GridView { id: root width: 320; height: 480 cellWidth: 80; cellHeight: 80 displaced: Transition { NumberAnimation { properties: "x,y"; easing.type: Easing.OutQuad } } //! [0] model: DelegateModel { //! [0] id: visualModel model: ListModel { id: colorModel ListElement { color: "blue" } ListElement { color: "green" } ListElement { color: "red" } ListElement { color: "yellow" } ListElement { color: "orange" } ListElement { color: "purple" } ListElement { color: "cyan" } ListElement { color: "magenta" } ListElement { color: "chartreuse" } ListElement { color: "aquamarine" } ListElement { color: "indigo" } ListElement { color: "black" } ListElement { color: "lightsteelblue" } ListElement { color: "violet" } ListElement { color: "grey" } ListElement { color: "springgreen" } ListElement { color: "salmon" } ListElement { color: "blanchedalmond" } ListElement { color: "forestgreen" } ListElement { color: "pink" } ListElement { color: "navy" } ListElement { color: "goldenrod" } ListElement { color: "crimson" } ListElement { color: "teal" } } //! [1] delegate: DropArea { id: delegateRoot width: 80; height: 80 onEntered: visualModel.items.move(drag.source.visualIndex, icon.visualIndex) property int visualIndex: DelegateModel.itemsIndex Binding { target: icon; property: "visualIndex"; value: visualIndex } Rectangle { id: icon property int visualIndex: 0 width: 72; height: 72 anchors { horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter } radius: 3 color: model.color Text { anchors.centerIn: parent color: "white" text: parent.visualIndex } DragHandler { id: dragHandler } Drag.active: dragHandler.active Drag.source: icon Drag.hotSpot.x: 36 Drag.hotSpot.y: 36 states: [ State { when: icon.Drag.active ParentChange { target: icon parent: root } AnchorChanges { target: icon anchors.horizontalCenter: undefined anchors.verticalCenter: undefined } } ] } } //! [1] } }I want my gridView to have 2 columns and 4 rows and to be flickable in the horizontal direction. During a drag it would be helpful to turn to the next page, if I move a dragged item to the border. I thought I can do this via a
MouseArealike thisMouseArea { anchors.top: parent.top anchors.bottom: parent.bottom anchors.left: parent.right anchors.leftMargin: -80 anchors.right: parent.right hoverEnabled: true onContainsMouseChanged: { if(containsMouse==true) { console.log("Entered MouseArea for blaettern rechts") if(root.state=="dragActive") { gridView.moveCurrentIndexRight() } } } }However, it seems that
onContainsMouseChangednever gets activated during dragging, like the dragging is stealing the event form thisMouseArea.How can this be done correctly?
-
Never mind, I must have had some stupir error. The following seems to work roughly:
import QtQuick 2.12 import QtQuick.Window 2.12 import QtQml.Models 2.1 Window { visible: true width: 800 height: 400 title: qsTr("Hello World") MouseArea { anchors.top: parent.top anchors.bottom: parent.bottom anchors.left: parent.right anchors.leftMargin: -80 anchors.right: parent.right hoverEnabled: true onContainsMouseChanged: { if(containsMouse==true) { root.moveCurrentIndexRight() } } Rectangle { anchors.fill: parent color: "red" } } MouseArea { anchors.top: parent.top anchors.bottom: parent.bottom anchors.left: parent.left anchors.leftMargin: -80 anchors.right: parent.left hoverEnabled: true onContainsMouseChanged: { if(containsMouse==true) { root.moveCurrentIndexLeft() } } Rectangle { anchors.fill: parent color: "red" } } GridView { id: root width: 800; height: 400 cellWidth: 400; cellHeight: 100 contentHeight: 100 contentWidth: 400 flow: GridView.FlowTopToBottom highlightRangeMode: GridView.StrictlyEnforceRange snapMode: GridView.SnapToRow boundsBehavior: Flickable.StopAtBounds currentIndex: 1 flickableDirection: Flickable.HorizontalFlick displaced: Transition { NumberAnimation { properties: "x,y"; easing.type: Easing.OutQuad } } //! [0] model: DelegateModel { //! [0] id: visualModel model: ListModel { id: colorModel ListElement { color: "blue" } ListElement { color: "green" } ListElement { color: "red" } ListElement { color: "yellow" } ListElement { color: "orange" } ListElement { color: "purple" } ListElement { color: "cyan" } ListElement { color: "magenta" } ListElement { color: "chartreuse" } ListElement { color: "aquamarine" } ListElement { color: "indigo" } ListElement { color: "black" } ListElement { color: "lightsteelblue" } ListElement { color: "violet" } ListElement { color: "grey" } ListElement { color: "springgreen" } ListElement { color: "salmon" } ListElement { color: "blanchedalmond" } ListElement { color: "forestgreen" } ListElement { color: "pink" } ListElement { color: "navy" } ListElement { color: "goldenrod" } ListElement { color: "crimson" } ListElement { color: "teal" } } //! [1] delegate: DropArea { id: delegateRoot width: 80; height: 80 onEntered: visualModel.items.move(drag.source.visualIndex, icon.visualIndex) property int visualIndex: DelegateModel.itemsIndex Binding { target: icon; property: "visualIndex"; value: visualIndex } Rectangle { id: icon property int visualIndex: 0 width: 72; height: 72 anchors { horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter } radius: 3 color: model.color Text { anchors.centerIn: parent color: "white" text: parent.visualIndex } DragHandler { id: dragHandler } Drag.active: dragHandler.active Drag.source: icon Drag.hotSpot.x: 36 Drag.hotSpot.y: 36 states: [ State { when: icon.Drag.active ParentChange { target: icon parent: root } AnchorChanges { target: icon anchors.horizontalCenter: undefined anchors.verticalCenter: undefined } } ] } } //! [1] } } }