在QML中拖放

Question

如何在QML中开发拖放功能？我想拖放一个图像到另一个。

Answer 1

此时，您可能需要使用C++，特别是如果您想接受QML应用程序之外的丢弃（例如用户将文件从文件管理器拖到应用程序中）。下面是一个例子组件类实现DropArea项目：

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(); 
} 

您的QML：

DropArea { 
    onTextDrop: ... 
} 

，你可以类似地实现一个DragSourceArea。

Answer 2

QML：拖动，删除和调整动态元素，一个简单的例子，在一个KDE博客上发现，这个例子是完全用QML

http://kdeblog.mageprojects.com/2012/08/16/qml-drag-drop-and-resize-dynamic-element-followup/

Answer 3

我知道它已经有一段时间，但我奋斗了这么多有了这个，我想和大家分享的QT5版本：

基于

上ecloud的迈克尔的例子：

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  
}