Drag and drop in QML [closed] - qt

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
How can I develop drag and drop functionality in QML? I want to drag and drop one image to another.

Answer 1

At this point in time, you will probably need to use C++, especially if you want to accept drops from outside the QML application (e.g. the user drags a file from a file manager to your app). Here's an example component class to implement a DropArea item:
DropArea.h:
#ifndef DropArea_H
#define DropArea_H
#include <QDeclarativeItem>
/**
An oversimplified prototype Item which accepts any drop that includes
data with mime type of text/plain, and just emits the text.
*/
class DropArea : public QDeclarativeItem
{
Q_OBJECT
Q_PROPERTY(bool acceptingDrops READ isAcceptingDrops WRITE setAcceptingDrops NOTIFY acceptingDropsChanged)
public:
DropArea(QDeclarativeItem *parent=0);
bool isAcceptingDrops() const { return m_accepting; }
void setAcceptingDrops(bool accepting);
signals:
void textDrop(QString text);
void acceptingDropsChanged();
protected:
void dragEnterEvent(QGraphicsSceneDragDropEvent *event);
void dragLeaveEvent(QGraphicsSceneDragDropEvent *event);
void dropEvent(QGraphicsSceneDragDropEvent *event);
private:
bool m_accepting;
};
#endif
DropArea.cpp:
#include <QGraphicsSceneDragDropEvent>
#include <QMimeData>
#include "DropArea.h"
DropArea::DropArea(QDeclarativeItem *parent)
: QDeclarativeItem(parent),
m_accepting(true)
{
setAcceptDrops(m_accepting);
}
void DropArea::dragEnterEvent(QGraphicsSceneDragDropEvent *event)
{
event->acceptProposedAction();
setCursor(Qt::DragMoveCursor);
}
void DropArea::dragLeaveEvent(QGraphicsSceneDragDropEvent *event)
{
unsetCursor();
}
void DropArea::dropEvent(QGraphicsSceneDragDropEvent *event)
{
emit textDrop(event->mimeData()->text());
unsetCursor();
}
void DropArea::setAcceptingDrops(bool accepting)
{
if (accepting == m_accepting)
return;
m_accepting = accepting;
setAcceptDrops(m_accepting);
emit acceptingDropsChanged();
}
your QML:
DropArea {
onTextDrop: ...
}
And you can implement a DragSourceArea similarly.

Answer 2

I know it's been a while but I struggled so much with this I wanted to share the Qt5 version:
Based on ecloud an Michael's example:
DropArea.h:
#ifndef DropArea_H
#define DropArea_H
#include <QQuickItem>
/**
An oversimplified prototype Item which accepts any drop that includes
data with mime type of text/plain, and just emits the text.
*/
class DropArea : public QQuickItem
{
Q_OBJECT
Q_PROPERTY(bool acceptingDrops READ isAcceptingDrops WRITE setAcceptingDrops NOTIFY acceptingDropsChanged)
public:
DropArea(QQuickItem *parent=0);
bool isAcceptingDrops() const { return m_accepting; }
void setAcceptingDrops(bool accepting);
signals:
void textDrop(QString text);
void acceptingDropsChanged();
protected:
void dragEnterEvent(QDragEnterEvent *event);
void dragLeaveEvent(QDragLeaveEvent *event);
void dropEvent(QDropEvent *event);
private:
bool m_accepting;
};
#endif
DropArea.cpp:
#include <QGraphicsSceneDragDropEvent>
#include <QMimeData>
#include "DropArea.h"
DropArea::DropArea(QQuickItem *parent)
: QQuickItem (parent),
m_accepting(true)
{
setFlag(QQuickItem::ItemAcceptsDrops, m_accepting);
}
void DropArea::dragEnterEvent(QDragEnterEvent *event)
{
event->acceptProposedAction();
}
void DropArea::dragLeaveEvent(QDragLeaveEvent *event)
{
unsetCursor();
}
void DropArea::dropEvent(QDropEvent *event)
{
qDebug() << event->mimeData()->text();
unsetCursor();
}
void DropArea::setAcceptingDrops(bool accepting)
{
if (accepting == m_accepting)
return;
m_accepting = accepting;
setFlag(QQuickItem::ItemAcceptsDrops, m_accepting);
emit acceptingDropsChanged();
}
Qml:
Drop2 {
id: myDropArea
}