在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  
}