[BlueT - Matthew Lien - 練喆明]

Is there any way to make AppCard vertically draggable?

I need to make a horizontal scrollable list of cards, and cards need to be vertically draggable (and drop).

Setting  cardSwipeArea.mouseArea.drag.axis: Drag.YAxis doesn’t work, with error “QML Component: Cannot create delegate” and “Cannot set properties on mouseArea as it is null”.

What I tried:

import Felgo 3.0
import QtQuick 2.0

Page {
	id: page
	title: "Horizontal List"
	Component.onCompleted: {
		console.debug("YAxis: ", Drag.XAxis)
	}

	AppListView {
		orientation: AppListView.Horizontal
		height: parent.height / 3
		anchors.bottom: parent.bottom
		backgroundColor: transientParent

		model: 10
		delegate: AppCard {
			id: card
			width: page.width * 0.75
			margin: dp(15)
			paper.radius: dp(5)
			swipeEnabled: true

			// try to set, but failed
			cardSwipeArea.mouseArea.drag.axis: Drag.YAxis

			cardSwipeArea.rotationFactor: 0.05

			header: SimpleRow {
				imageSource: "https://cdn.pixabay.com/photo/2016/06/24/10/47/architecture-1477041_960_720.jpg"
				text: "Lorem ipsum"

				enabled: false
				image.radius: image.width/2
				image.fillMode: Image.PreserveAspectCrop
				style: StyleSimpleRow {
					showDisclosure: false
					backgroundColor: "transparent"
				}
			}

			content: AppText{
				width: parent.width
				padding: dp(15)
				text: "#"+index
			}
		}
	}
}

 

[AlexFelgo Team]

Hi,

I’d suggest to add your own MouseArea to handle the swipe. The internal AppCardSwipeArea is not intended for vertical use and might cause unexpected behavior.

Best,
Alex