<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- draggableicons.qdoc -->
<title>Qt 4.8: Draggable Icons Example</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/functions.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style/superfish.css" />
<link rel="stylesheet" type="text/css" href="style/narrow.css" />
<!--[if IE]>
<meta name="MSSmartTagsPreventParsing" content="true">
<meta http-equiv="imagetoolbar" content="no">
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie6.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie7.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/style_ie8.css">
<![endif]-->
<script src="scripts/superfish.js" type="text/javascript"></script>
<script src="scripts/narrow.js" type="text/javascript"></script>
</head>
<body class="" onload="CheckEmptyAndLoadList();">
<div class="header" id="qtdocheader">
<div class="content">
<div id="nav-logo">
<a href="index.html">Home</a></div>
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
<div id="narrowsearch"></div>
<div id="nav-topright">
<ul>
<li class="nav-topright-home"><a href="http://qt.digia.com/">Qt HOME</a></li>
<li class="nav-topright-dev"><a href="http://qt-project.org/">DEV</a></li>
<li class="nav-topright-doc nav-topright-doc-active"><a href="http://qt-project.org/doc/">
DOC</a></li>
<li class="nav-topright-blog"><a href="http://blog.qt.digia.com/">BLOG</a></li>
</ul>
</div>
<div id="shortCut">
<ul>
<li class="shortCut-topleft-inactive"><span><a href="index.html">Qt 4.8</a></span></li>
<li class="shortCut-topleft-active"><a href="http://qt-project.org/doc/">ALL VERSIONS </a></li>
</ul>
</div>
<ul class="sf-menu" id="narrowmenu">
<li><a href="#">API Lookup</a>
<ul>
<li><a href="classes.html">Class index</a></li>
<li><a href="functions.html">Function index</a></li>
<li><a href="modules.html">Modules</a></li>
<li><a href="namespaces.html">Namespaces</a></li>
<li><a href="qtglobal.html">Global Declarations</a></li>
<li><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</li>
<li><a href="#">Qt Topics</a>
<ul>
<li><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li><a href="supported-platforms.html">Supported Platforms</a></li>
<li><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</li>
<li><a href="#">Examples</a>
<ul>
<li><a href="all-examples.html">Examples</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="demos.html">Demos</a></li>
<li><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="hd">
<span></span>
</div>
<div class="bd group">
<div class="sidebar">
<div class="searchlabel">
Search index:</div>
<div class="search" id="sidebarsearch">
<form id="qtdocsearch" action="" onsubmit="return false;">
<fieldset>
<input type="text" name="searchstring" id="pageType" value="" />
<div id="resultdialog">
<a href="#" id="resultclose">Close</a>
<p id="resultlinks" class="all"><a href="#" id="showallresults">All</a> | <a href="#" id="showapiresults">API</a> | <a href="#" id="showarticleresults">Articles</a> | <a href="#" id="showexampleresults">Examples</a></p>
<p id="searchcount" class="all"><span id="resultcount"></span><span id="apicount"></span><span id="articlecount"></span><span id="examplecount"></span> results:</p>
<ul id="resultlist" class="all">
</ul>
</div>
</fieldset>
</form>
</div>
<div class="box first bottombar" id="lookup">
<h2 title="API Lookup"><span></span>
API Lookup</h2>
<div id="list001" class="list">
<ul id="ul001" >
<li class="defaultLink"><a href="classes.html">Class index</a></li>
<li class="defaultLink"><a href="functions.html">Function index</a></li>
<li class="defaultLink"><a href="modules.html">Modules</a></li>
<li class="defaultLink"><a href="namespaces.html">Namespaces</a></li>
<li class="defaultLink"><a href="qtglobal.html">Global Declarations</a></li>
<li class="defaultLink"><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</div>
</div>
<div class="box bottombar" id="topics">
<h2 title="Qt Topics"><span></span>
Qt Topics</h2>
<div id="list002" class="list">
<ul id="ul002" >
<li class="defaultLink"><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li class="defaultLink"><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li class="defaultLink"><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li class="defaultLink"><a href="supported-platforms.html">Supported Platforms</a></li>
<li class="defaultLink"><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li class="defaultLink"><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</div>
</div>
<div class="box" id="examples">
<h2 title="Examples"><span></span>
Examples</h2>
<div id="list003" class="list">
<ul id="ul003">
<li class="defaultLink"><a href="all-examples.html">Examples</a></li>
<li class="defaultLink"><a href="tutorials.html">Tutorials</a></li>
<li class="defaultLink"><a href="demos.html">Demos</a></li>
<li class="defaultLink"><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</div>
</div>
</div>
<div class="wrap">
<div class="toolbar">
<div class="breadcrumb toolblock">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<!-- Breadcrumbs go here -->
<li><a href="all-examples.html">Examples</a></li>
<li>Draggable Icons Example</li>
</ul>
</div>
<div class="toolbuttons toolblock">
<ul>
<li id="smallA" class="t_button">A</li>
<li id="medA" class="t_button active">A</li>
<li id="bigA" class="t_button">A</li>
<li id="print" class="t_button"><a href="javascript:this.print();">
<span>Print</span></a></li>
</ul>
</div>
</div>
<div class="content mainContent">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#dragwidget-class-definition">DragWidget Class Definition</a></li>
<li class="level1"><a href="#dragwidget-class-implementation">DragWidget Class Implementation</a></li>
</ul>
</div>
<h1 class="title">Draggable Icons Example</h1>
<span class="subtitle"></span>
<!-- $$$draganddrop/draggableicons-description -->
<div class="descr"> <a name="details"></a>
<p>Files:</p>
<ul>
<li><a href="draganddrop-draggableicons-dragwidget-cpp.html">draganddrop/draggableicons/dragwidget.cpp</a></li>
<li><a href="draganddrop-draggableicons-dragwidget-h.html">draganddrop/draggableicons/dragwidget.h</a></li>
<li><a href="draganddrop-draggableicons-main-cpp.html">draganddrop/draggableicons/main.cpp</a></li>
<li><a href="draganddrop-draggableicons-draggableicons-pro.html">draganddrop/draggableicons/draggableicons.pro</a></li>
<li><a href="draganddrop-draggableicons-draggableicons-qrc.html">draganddrop/draggableicons/draggableicons.qrc</a></li>
</ul>
<p>Images:</p>
<ul>
<li><a href="images/used-in-examples/draganddrop/draggableicons/images/boat.png">draganddrop/draggableicons/images/boat.png</a></li>
<li><a href="images/used-in-examples/draganddrop/draggableicons/images/car.png">draganddrop/draggableicons/images/car.png</a></li>
<li><a href="images/used-in-examples/draganddrop/draggableicons/images/house.png">draganddrop/draggableicons/images/house.png</a></li>
</ul>
<p>The Draggable Icons example shows how to drag and drop image data between widgets in the same application, and between different applications.<p class="centerAlign"><img src="images/draggableicons-example.png" alt="" /></p><p>In many situations where drag and drop is used, the user starts dragging from a particular widget and drops the payload onto another widget. In this example, we subclass <a href="qlabel.html">QLabel</a> to create labels that we use as drag sources, and place them inside <a href="qwidget.html">QWidget</a>s that serve as both containers and drop sites.</p>
<p>In addition, when a drag and drop operation occurs, we want to send more than just an image. We also want to send information about where the user clicked in the image so that the user can place it precisely on the drop target. This level of detail means that we must create a custom MIME type for our data.</p>
<a name="dragwidget-class-definition"></a>
<h2>DragWidget Class Definition</h2>
<p>The icon widgets that we use to display icons are subclassed from <a href="qlabel.html">QLabel</a>:</p>
<pre class="cpp"> <span class="keyword">class</span> DragWidget : <span class="keyword">public</span> <span class="type"><a href="qframe.html">QFrame</a></span>
{
<span class="keyword">public</span>:
DragWidget(<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>parent<span class="operator">=</span><span class="number">0</span>);
<span class="keyword">protected</span>:
<span class="type">void</span> dragEnterEvent(<span class="type"><a href="qdragenterevent.html">QDragEnterEvent</a></span> <span class="operator">*</span>event);
<span class="type">void</span> dragMoveEvent(<span class="type"><a href="qdragmoveevent.html">QDragMoveEvent</a></span> <span class="operator">*</span>event);
<span class="type">void</span> dropEvent(<span class="type"><a href="qdropevent.html">QDropEvent</a></span> <span class="operator">*</span>event);
<span class="type">void</span> mousePressEvent(<span class="type"><a href="qmouseevent.html">QMouseEvent</a></span> <span class="operator">*</span>event);
};</pre>
<p>Since the <a href="qlabel.html">QLabel</a> class provides most of what we require for the icon, we only need to reimplement the <a href="qwidget.html#mousePressEvent">QWidget::mousePressEvent</a>() to provide drag and drop facilities.</p>
<a name="dragwidget-class-implementation"></a>
<h2>DragWidget Class Implementation</h2>
<p>The <tt>DragWidget</tt> constructor sets an attribute on the widget that ensures that it will be deleted when it is closed:</p>
<pre class="cpp"> DragWidget<span class="operator">::</span>DragWidget(<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>parent)
: <span class="type"><a href="qframe.html">QFrame</a></span>(parent)
{
<span class="preprocessor">#if defined(Q_OS_SYMBIAN) || defined(Q_WS_MAEMO_5) || defined(Q_WS_SIMULATOR)</span>
<span class="preprocessor">#else</span>
setMinimumSize(<span class="number">200</span><span class="operator">,</span> <span class="number">200</span>);
<span class="preprocessor">#endif</span>
setFrameStyle(<span class="type"><a href="qframe.html">QFrame</a></span><span class="operator">::</span>Sunken <span class="operator">|</span> <span class="type"><a href="qframe.html">QFrame</a></span><span class="operator">::</span>StyledPanel);
setAcceptDrops(<span class="keyword">true</span>);
<span class="type"><a href="qlabel.html">QLabel</a></span> <span class="operator">*</span>boatIcon <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qlabel.html">QLabel</a></span>(<span class="keyword">this</span>);
boatIcon<span class="operator">-</span><span class="operator">></span>setPixmap(<span class="type"><a href="qpixmap.html">QPixmap</a></span>(<span class="string">":/images/boat.png"</span>));
boatIcon<span class="operator">-</span><span class="operator">></span>move(<span class="number">10</span><span class="operator">,</span> <span class="number">10</span>);
boatIcon<span class="operator">-</span><span class="operator">></span>show();
boatIcon<span class="operator">-</span><span class="operator">></span>setAttribute(<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>WA_DeleteOnClose);
<span class="type"><a href="qlabel.html">QLabel</a></span> <span class="operator">*</span>carIcon <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qlabel.html">QLabel</a></span>(<span class="keyword">this</span>);
carIcon<span class="operator">-</span><span class="operator">></span>setPixmap(<span class="type"><a href="qpixmap.html">QPixmap</a></span>(<span class="string">":/images/car.png"</span>));
carIcon<span class="operator">-</span><span class="operator">></span>move(<span class="number">100</span><span class="operator">,</span> <span class="number">10</span>);
carIcon<span class="operator">-</span><span class="operator">></span>show();
carIcon<span class="operator">-</span><span class="operator">></span>setAttribute(<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>WA_DeleteOnClose);
<span class="type"><a href="qlabel.html">QLabel</a></span> <span class="operator">*</span>houseIcon <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qlabel.html">QLabel</a></span>(<span class="keyword">this</span>);
houseIcon<span class="operator">-</span><span class="operator">></span>setPixmap(<span class="type"><a href="qpixmap.html">QPixmap</a></span>(<span class="string">":/images/house.png"</span>));
houseIcon<span class="operator">-</span><span class="operator">></span>move(<span class="number">10</span><span class="operator">,</span> <span class="number">80</span>);
houseIcon<span class="operator">-</span><span class="operator">></span>show();
houseIcon<span class="operator">-</span><span class="operator">></span>setAttribute(<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>WA_DeleteOnClose);
}</pre>
<p>To enable dragging from the icon, we need to act on a mouse press event. We do this by reimplementing <a href="qwidget.html#mousePressEvent">QWidget::mousePressEvent</a>() and setting up a <a href="qdrag.html">QDrag</a> object.</p>
<pre class="cpp"> <span class="type">void</span> DragWidget<span class="operator">::</span>mousePressEvent(<span class="type"><a href="qmouseevent.html">QMouseEvent</a></span> <span class="operator">*</span>event)
{
<span class="type"><a href="qlabel.html">QLabel</a></span> <span class="operator">*</span>child <span class="operator">=</span> <span class="keyword">static_cast</span><span class="operator"><</span><span class="type"><a href="qlabel.html">QLabel</a></span><span class="operator">*</span><span class="operator">></span>(childAt(event<span class="operator">-</span><span class="operator">></span>pos()));
<span class="keyword">if</span> (<span class="operator">!</span>child)
<span class="keyword">return</span>;
<span class="type"><a href="qpixmap.html">QPixmap</a></span> pixmap <span class="operator">=</span> <span class="operator">*</span>child<span class="operator">-</span><span class="operator">></span>pixmap();
<span class="type"><a href="qbytearray.html">QByteArray</a></span> itemData;
<span class="type"><a href="qdatastream.html">QDataStream</a></span> dataStream(<span class="operator">&</span>itemData<span class="operator">,</span> <span class="type"><a href="qiodevice.html">QIODevice</a></span><span class="operator">::</span>WriteOnly);
dataStream <span class="operator"><</span><span class="operator"><</span> pixmap <span class="operator"><</span><span class="operator"><</span> <span class="type"><a href="qpoint.html">QPoint</a></span>(event<span class="operator">-</span><span class="operator">></span>pos() <span class="operator">-</span> child<span class="operator">-</span><span class="operator">></span>pos());</pre>
<p>Since we will be sending pixmap data for the icon and information about the user's click in the icon widget, we construct a <a href="qbytearray.html">QByteArray</a> and package up the details using a <a href="qdatastream.html">QDataStream</a>.</p>
<p>For interoperability, drag and drop operations describe the data they contain using MIME types. In Qt, we describe this data using a <a href="qmimedata.html">QMimeData</a> object:</p>
<pre class="cpp"> <span class="type"><a href="qmimedata.html">QMimeData</a></span> <span class="operator">*</span>mimeData <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qmimedata.html">QMimeData</a></span>;
mimeData<span class="operator">-</span><span class="operator">></span>setData(<span class="string">"application/x-dnditemdata"</span><span class="operator">,</span> itemData);</pre>
<p>We choose an unofficial MIME type for this purpose, and supply the <a href="qbytearray.html">QByteArray</a> to the MIME data object.</p>
<p>The drag and drop operation itself is handled by a <a href="qdrag.html">QDrag</a> object:</p>
<pre class="cpp"> <span class="type"><a href="qdrag.html">QDrag</a></span> <span class="operator">*</span>drag <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qdrag.html">QDrag</a></span>(<span class="keyword">this</span>);
drag<span class="operator">-</span><span class="operator">></span>setMimeData(mimeData);
drag<span class="operator">-</span><span class="operator">></span>setPixmap(pixmap);
drag<span class="operator">-</span><span class="operator">></span>setHotSpot(event<span class="operator">-</span><span class="operator">></span>pos() <span class="operator">-</span> child<span class="operator">-</span><span class="operator">></span>pos());</pre>
<p>Here, we pass the data to the drag object, set a pixmap that will be shown alongside the cursor during the operation, and define the position of a hot spot that places the position of this pixmap under the cursor.</p>
</div>
<!-- @@@draganddrop/draggableicons -->
</div>
</div>
</div>
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2013 Digia Plc and/or its
subsidiaries. Documentation contributions included herein are the copyrights of
their respective owners.</p>
<br />
<p>
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.</p>
<p>
Documentation sources may be obtained from <a href="http://www.qt-project.org">
www.qt-project.org</a>.</p>
<br />
<p>
Digia, Qt and their respective logos are trademarks of Digia Plc
in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. <a title="Privacy Policy"
href="http://en.gitorious.org/privacy_policy/">Privacy Policy</a></p>
</div>
<script src="scripts/functions.js" type="text/javascript"></script>
</body>
</html>
