<?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 3 - Moving Dragged 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 3 - Moving Dragged 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-dynamicview2-example.html" />
<link rel="next" href="qtquick-tutorials-dynamicview-dynamicview4-example.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="qtquick-tutorials-dynamicview-dynamicview2-example.html">QML Dynamic View Ordering Tutorial 2 - Dragging View Items</a>
<span class="naviSeparator"> ◦ </span>
<a class="nextPage" href="qtquick-tutorials-dynamicview-dynamicview4-example.html">QML Dynamic View Ordering Tutorial 4 - Sorting 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 3 - Moving Dragged Items</h1>
<span class="subtitle"></span>
<!-- $$$tutorials/dynamicview/dynamicview3-description -->
<div class="descr"> <a name="details"></a>
<p>The next step in our application to move items within the list as they're dragged so that we can re-order the list. To achieve this we introduce three new types to our application; DelegateModel, <a href="qml-qtquick-drag.html">Drag</a> and <a href="qml-qtquick-droparea.html">DropArea</a>.</p>
<pre class="qml">
Rectangle {
id: root
width: 300; height: 400
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
Drag.active: dragArea.held
Drag.source: dragArea
Drag.hotSpot.x: width / 2
Drag.hotSpot.y: height / 2
}
DropArea {
anchors { fill: parent; margins: 10 }
onEntered: {
visualModel.items.move(
drag.source.DelegateModel.itemsIndex,
dragArea.DelegateModel.itemsIndex)
}
}
}
}
}
</pre>
<a name="walkthrough"></a>
<h3 id="walkthrough">Walkthrough</h3>
<p>In order to re-order the view we need to determine when one item has been dragged over another. With the Drag attached property we can generate events that are sent to the scene graph whenever the item it is attached to moves.</p>
<pre class="qml">
Drag.active: dragArea.held
Drag.source: dragArea
Drag.hotSpot.x: width / 2
Drag.hotSpot.y: height / 2
</pre>
<p>Drag events are only sent while the active property is true, so in this example the first event would be sent when the delegate was held with additional event sents when dragging. The <a href="qml-qtquick-drag.html#hotSpot-attached-prop">hotSpot</a> property specifies the relative position of the drag events within the dragged item, the center of the item in this instance.</p>
<p>Then we use a <a href="qml-qtquick-droparea.html">DropArea</a> in each view item to determine when the hot spot of the dragged item intersects another item, when a drag enters one of these DropAreas we can move the dragged item to the index of the item it was dragged over.</p>
<pre class="qml">
DropArea {
anchors { fill: parent; margins: 10 }
onEntered: {
visualModel.items.move(
drag.source.DelegateModel.itemsIndex,
dragArea.DelegateModel.itemsIndex)
}
}
</pre>
<p>To move the items within the view we use a DelegateModel. The DelegateModel type is used by the view types to instantiate delegate items from model data and when constructed explicitly can be used to filter and re-order the model items provided to <a href="qml-qtquick-listview.html">ListView</a>. The items property of DelegateModel provides access to the view's items and allows us to change the visible order without modifying the source model. To determine the current visible index of the items we use itemsIndex {itemsIndex} property on the DelegateModel attached property of the delegate item.</p>
<p>To utilize a DelegateModel with a <a href="qml-qtquick-listview.html">ListView</a> we bind it to the <a href="qml-qtquick-listview.html#model-prop">model</a> property of the view and bind the model and delegate to the DelegateModel.</p>
<pre class="qml">
DelegateModel {
id: visualModel
model: PetsModel {}
delegate: dragDelegate
}
ListView {
id: view
anchors { fill: parent; margins: 2 }
model: visualModel
spacing: 4
cacheBuffer: 50
}
</pre>
<p>Files:</p>
<ul>
<li><a href="qtquick-tutorials-dynamicview-dynamicview3-petsmodel-qml.html">tutorials/dynamicview/dynamicview3/PetsModel.qml</a></li>
<li><a href="qtquick-tutorials-dynamicview-dynamicview3-dynamicview-qml.html">tutorials/dynamicview/dynamicview3/dynamicview.qml</a></li>
<li><a href="qtquick-tutorials-dynamicview-dynamicview3-dynamicview3-qmlproject.html">tutorials/dynamicview/dynamicview3/dynamicview3.qmlproject</a></li>
</ul>
</div>
<!-- @@@tutorials/dynamicview/dynamicview3 -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="qtquick-tutorials-dynamicview-dynamicview2-example.html">QML Dynamic View Ordering Tutorial 2 - Dragging View Items</a>
<span class="naviSeparator"> ◦ </span>
<a class="nextPage" href="qtquick-tutorials-dynamicview-dynamicview4-example.html">QML Dynamic View Ordering Tutorial 4 - Sorting 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
>
1788
