I have created a ListView and I want to drag & drop the items within it. As long as I do not move the items out of the view, everything works fine.
To scroll the view while the mouse is pressed, I have animated the ListView. During the animations, the DropArea entered is not called.
If I then drag an item out of the view (the space of the item is not visible anymore), the x of the items is shifted for 80 pixels (width of an item) to the right. I am not sure if this is the desired behaviour, for me it causes some problems as it is not possible anymore to move the items to the very right.
I have already tried to set the cacheBuffer higher and also tried to move the items into the persistedItems.
The best way to reproduce it is to drag the first item, move the mouse underneath the list and to the very right and wait until the list has scrolled to the end. Then move the item to the left of the last item (also underneath the list) and drop it.
Has anyone had the same problem or are there any suggestions on how to implement this scrolling while dragging & dropping?
Thank you in advance!
import QtQuick 2.0
import QtQml.Models 2.1
Item
{
width: 800
height: 150
ListView {
id: root
width: 800; height: 150
orientation: ListView.Horizontal
displaced: Transition {
NumberAnimation { properties: "x,y"; easing.type: Easing.OutQuad }
}
PropertyAnimation
{
id: ani
property bool bForward: false
target: root
property: "contentX"
from: root.contentX
to: bForward ? root.contentWidth-root.width : 0
duration: bForward ? (root.contentWidth-root.width-root.contentX)*2 : root.contentX*2
}
cacheBuffer: model.count*1000
property bool forward: false
spacing: 10
property bool dragActive: false
model: DelegateModel {
id: visualModel
model: ListModel {
id: colorModel
ListElement { color: "yellow" }
ListElement { color: "orange" }
ListElement { color: "red" }
ListElement { color: "darkred" }
ListElement { color: "pink" }
ListElement { color: "purple" }
ListElement { color: "lightblue" }
ListElement { color: "blue" }
ListElement { color: "darkblue" }
ListElement { color: "lightgreen" }
ListElement { color: "green" }
ListElement { color: "darkgreen" }
ListElement { color: "lightgrey" }
ListElement { color: "darkgrey" }
ListElement { color: "grey" }
ListElement { color: "black" }
}
delegate: MouseArea {
id: delegateRoot
property int visualIndex: DelegateModel.itemsIndex
width: 80; height: 80
drag.target: icon
onXChanged: if(visualIndex == 0) console.log("x: " + x)
Rectangle {
id: icon
width: 80; height: 80
opacity: root.currentIndex == delegateRoot.DelegateModel.itemsIndex ? 1 : 0.2
anchors {
horizontalCenter: parent.horizontalCenter;
verticalCenter: parent.verticalCenter
}
color: model.color
radius: 3
Drag.active: delegateRoot.drag.active
Drag.source: delegateRoot
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
}
}
]
}
Text
{
anchors.centerIn: parent
text: index + " " + delegateRoot.DelegateModel.itemsIndex
}
DropArea {
id:dropArea
anchors { fill: parent; margins: 15 }
onEntered:
{
visualModel.items.move(drag.source.visualIndex, delegateRoot.visualIndex)
}
}
onReleased:
{
ani.stop()
}
onMouseXChanged:
{
root.dragActive = true
if(mapToItem(root, mouseX, mouseY).x > 750)
{
if(!root.atXEnd)
{
ani.bForward = true
ani.start()
}
}
else if(mapToItem(root, mouseX, mouseY).x < 50)
{
if(!root.atXBeginning)
{
ani.bForward = false
ani.start()
}
}
else if (mapToItem(root, mouseX, mouseY).x >= 50 && mapToItem(root, mouseX, mouseY).x <= 750)
{
ani.stop()
}
}
}
}
}
}
↧