<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- dynamicview-tutorial.qdoc -->
<title>QML Dynamic View Ordering Tutorial 2 - Dragging View Items | Qt Quick 5.12.6</title>
<link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
<script type="text/javascript">
document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
// loading style sheet breaks anchors that were jumped to before
// so force jumping to anchor again
setTimeout(function() {
var anchor = location.hash;
// need to jump to different anchor first (e.g. none)
location.hash = "#";
setTimeout(function() {
location.hash = anchor;
}, 0);
}, 0);
</script>
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<table><tr>
<td >Qt 5.12</td><td ><a href="qtquick-index.html">Qt Quick</a></td><td >QML Dynamic View Ordering Tutorial 2 - Dragging View Items</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="qtquick-index.html">Qt 5.12.6 Reference Documentation</a></td>
</tr></table>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<link rel="prev" href="qtquick-tutorials-dynamicview-dynamicview1-example.html" />
<link rel="next" href="qtquick-tutorials-dynamicview-dynamicview3-example.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="qtquick-tutorials-dynamicview-dynamicview1-example.html">QML Dynamic View Ordering Tutorial 1 - A Simple ListView and Delegate</a>
<span class="naviSeparator"> ◦ </span>
<a class="nextPage" href="qtquick-tutorials-dynamicview-dynamicview3-example.html">QML Dynamic View Ordering Tutorial 3 - Moving Dragged Items</a>
</p><p/>
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level2"><a href="#walkthrough">Walkthrough</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">QML Dynamic View Ordering Tutorial 2 - Dragging View Items</h1>
<span class="subtitle"></span>
<!-- $$$tutorials/dynamicview/dynamicview2-description -->
<div class="descr"> <a name="details"></a>
<p>Now that we have a visible list of items we want to be able to interact with them. We'll start by extending the delegate so the visible content can be dragged up and down the screen. The updated delegate looks like this:</p>
<pre class="qml">
Component {
id: dragDelegate
MouseArea {
id: dragArea
property bool held: false
anchors { left: parent.left; right: parent.right }
height: content.height
drag.target: held ? content : undefined
drag.axis: Drag.YAxis
onPressAndHold: held = true
onReleased: held = false
Rectangle {
id: content
anchors {
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter
}
width: dragArea.width; height: column.implicitHeight + 4
border.width: 1
border.color: "lightsteelblue"
color: dragArea.held ? "lightsteelblue" : "white"
Behavior on color { ColorAnimation { duration: 100 } }
radius: 2
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 }
}
}
}
}
</pre>
<a name="walkthrough"></a>
<h3 id="walkthrough">Walkthrough</h3>
<p>The major change here is the root item of the delegate is now a <a href="qml-qtquick-mousearea.html">MouseArea</a> which provides handlers for mouse events and will allow us to drag the delegate's content item. It also acts as a container for the content item which is important as a delegate's root item is positioned by the view and cannot be moved by other means.</p>
<pre class="qml">
MouseArea {
id: dragArea
property bool held: false
anchors { left: parent.left; right: parent.right }
height: content.height
drag.target: held ? content : undefined
drag.axis: Drag.YAxis
onPressAndHold: held = true
onReleased: held = false
Rectangle {
id: content
}
}
</pre>
<p>Dragging the content item is enabled by binding it to the <a href="qml-qtquick-mousearea.html">MouseArea</a>'s <a href="qml-qtquick-mousearea.html#drag.target-prop">drag.target</a> property. Because we still want the view to be flickable we wait until the <a href="qml-qtquick-mousearea.html">MouseArea</a>'s <a href="qml-qtquick-mousearea.html#pressAndHold-signal">pressAndHold</a> signal is emitted before binding the drag target. This way when mouse moves before the hold timeout has expired it is interpreted as moving the list and if it moves after it is interpreted as dragging an item. To make it more obvious to the user when an item can be dragged we'll change the background color of the content item when the timeout has expired.</p>
<pre class="qml">
color: dragArea.held ? "lightsteelblue" : "white"
Behavior on color { ColorAnimation { duration: 100 } }
</pre>
<p>The other thing we'll need to do before an item can be dragged is to unset any anchors on the content item so it can be freely moved around. We do this in a state change that is triggered when the delegate item is held, at the same time we can reparent the content item to the root item so that is above other items in the stacking order and isn't obscured as it is dragged around.</p>
<pre class="qml">
states: State {
when: dragArea.held
ParentChange { target: content; parent: root }
AnchorChanges {
target: content
anchors { horizontalCenter: undefined; verticalCenter: undefined }
}
}
</pre>
<p>Files:</p>
<ul>
<li><a href="qtquick-tutorials-dynamicview-dynamicview2-petsmodel-qml.html">tutorials/dynamicview/dynamicview2/PetsModel.qml</a></li>
<li><a href="qtquick-tutorials-dynamicview-dynamicview2-dynamicview-qml.html">tutorials/dynamicview/dynamicview2/dynamicview.qml</a></li>
<li><a href="qtquick-tutorials-dynamicview-dynamicview2-dynamicview2-qmlproject.html">tutorials/dynamicview/dynamicview2/dynamicview2.qmlproject</a></li>
</ul>
</div>
<!-- @@@tutorials/dynamicview/dynamicview2 -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="qtquick-tutorials-dynamicview-dynamicview1-example.html">QML Dynamic View Ordering Tutorial 1 - A Simple ListView and Delegate</a>
<span class="naviSeparator"> ◦ </span>
<a class="nextPage" href="qtquick-tutorials-dynamicview-dynamicview3-example.html">QML Dynamic View Ordering Tutorial 3 - Moving Dragged Items</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2019 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.<br/> The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation.<br/> Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
distrib
>
Mageia
>
7
>
i586
>
media
>
core-updates
>
by-pkgid
>
6e2327ca1c896c6d674ae53117299f21
>
files
>
1784
