Details
-
Bug
-
Resolution: Unresolved
-
P3: Somewhat important
-
None
-
5.15.2
-
None
Description
I use drag and drop to move delegates. Using displayMarginBeginning/displayMarginEnd I can still see the delegates outside the ListView. When I drop a delegate on a delegate that is outside ListView, but (partly) inside the displayMarginBeginning, something goes wrong (lets call this delegate spot X).
It seems that the whole view gets moved. This can be seen in the "bug demo"-gif: moving to and from this spot X, the front of the list jumps one delegate forward.
If the cacheBuffer is not high enough (as it is in my current project), the dragged item will even be unloaded, which keeps the current drag.active state to true, and breaks my drag.active-dependent logic. The "bug delete drag demo"-gif demonstrates this unloading.
Note:
- as shown in the "bug demo"-gif: the problem does not happen in the displayMarginEnd-area
- triggering a move in DelegateModel, without making use of the DropAreas, also triggers this issue: the drag and drop feature does not seem to be the cause of the problem, just a method of pointing it out.
- I found this behavior also in earlier versions than 5.15.2
I tweaked the Qt drag-and-drop example code a bit to demonstrate:
- I added color to the ListElements to differentiate easier
- the content.border.color is now held-dependent instead of the content.color.
- there is a "lightsteelblue"-Rectangle showing the area used by the ListView, to show which delegates are inside the displayMarginBeginning-area
// dynamicview.qml import QtQuick 2.15 import QtQml.Models 2.1 //![0] Rectangle { id: root width: 500; height: 200 Component { id: dragDelegate MouseArea { id: dragArea property bool held: false width: 400 height: 68 drag.target: held ? content : undefined drag.axis: Drag.YAxis onPressAndHold: held = true onReleased: held = false Rectangle { id: content //![0] anchors { horizontalCenter: parent.horizontalCenter verticalCenter: parent.verticalCenter } width: dragArea.width; height: column.implicitHeight + 4 border.width: 3 border.color: dragArea.held ? "black" : "lightsteelblue" color: cellColor Behavior on color { ColorAnimation { duration: 100 } } radius: 2 //![1] Drag.active: dragArea.held Drag.source: dragArea Drag.hotSpot.x: width / 2 Drag.hotSpot.y: height / 2 //![1] states: State { when: dragArea.held ParentChange { target: content; parent: root } AnchorChanges { target: content anchors { horizontalCenter: undefined; verticalCenter: undefined } } } Column { id: column anchors { fill: parent; margins: 2 } Text { text: 'Name: ' + name } Text { text: 'Type: ' + type } Text { text: 'Age: ' + age } Text { text: 'Size: ' + size } } //![2] } //![3] DropArea { anchors { fill: parent; margins: 10 } onEntered: { visualModel.items.move( drag.source.DelegateModel.itemsIndex, dragArea.DelegateModel.itemsIndex) } } //![3] } } //![2] //![4] DelegateModel { id: visualModel model: PetsModel {} delegate: dragDelegate } ListView { id: view anchors.centerIn: parent height: 4 * 68 + 3 * spacing width: 500 Rectangle { anchors.fill: parent; opacity: 0.2; color: "lightsteelblue" } model: visualModel spacing: 6 cacheBuffer: 1000 displayMarginBeginning: 500 displayMarginEnd: 500 } //![4] //![5] } //![5]
// PetsModel.qml import QtQuick 2.0 ListModel { ListElement { name: "Polly" type: "Parrot" age: 12 size: "Small" } ListElement { name: "Penny" type: "Turtle" age: 4 size: "Small" } ListElement { name: "Warren" type: "Rabbit" age: 2 size: "Small" } ListElement { name: "Spot" type: "Dog" age: 9 size: "Medium" } ListElement { name: "Schrödinger" type: "Cat" age: 2 size: "Medium" } ListElement { name: "Joey" type: "Kangaroo" age: 1 size: "Medium" } ListElement { name: "Kimba" type: "Bunny" age: 65 size: "Large" } ListElement { name: "Rover" type: "Dog" age: 5 size: "Large" } ListElement { name: "Tiny" type: "Elephant" age: 15 size: "Large" } }