Drag and Drop in ListView

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP



Drag and Drop in ListView



I am trying to drag and drop a ListView row and I am having trouble at the drag stage. Below code doesn't drag anything and name column is not aligned properly. I don't want to specify a size for ListView and I want it to get its size from its content Row with id row. It should be able to because text has size coming from its font size and Rectangle has set width. ListView can get wider as needed to show the name part.


Row


import QtQuick 2.11
import QtQuick.Layouts 1.11

ListView
id: root
height: scrollview.viewport.height

model: listModel
delegate: dragDelegate

Component
id: dragDelegate

MouseArea
id: dragArea

anchors left: parent.left; right: parent.right
height: content.height

drag.target: pressed ? content : undefined
drag.axis: Drag.XAndYAxis

Rectangle
id: content
anchors
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter

height: row.implicitHeight

border.width: 1
border.color: "lightsteelblue"
color: "green"
radius: 2
states: State
when: dragArea.pressed

ParentChange target: content; parent: root
AnchorChanges
target: content
anchors horizontalCenter: undefined; verticalCenter: undefined


Row
id: row

Text
text: name
font.pointSize: 15

Rectangle
height: parent.height
width: 40
color: hexColor






ListModel
id: listModel
ListElement
name: "first-name"
hexColor: "red"

ListElement
name: "second-name"
hexColor: "green"











By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Popular posts from this blog

Firebase Auth - with Email and Password - Check user already registered

Dynamically update html content plain JS

Creating a leaderboard in HTML/JS