QAbstractItemModel + QML5.5 TreeView

Valerian

Hi All,

I'm using QML 5.5 TreeView with QAbstractItemModel. I have managed to view the data using TableViewColumn. I need to support re-ordering the elements within the tree using drag feature. To implement this I have put a MouseArea with the itemDelegate, so this allows me to move the item withing the tree. However, once the item is released it needs to get the new index. How can I achieve this..?
Kindly suggest.

Valerian

Here's the code

class TreeModel : public QAbstractItemModel
{
    Q_OBJECT
 
public:
    explicit TreeModel(const QString &data, QObject *parent = 0);
    ~TreeModel();
 
    enum TreeRoles {
        TitleRole = Qt::UserRole + 1,
        SummaryRole
    };
 
    QVariant data(const QModelIndex &index, int role) const Q_DECL_OVERRIDE;
    bool setData(const QModelIndex &index, const QVariant &value, int role);
    Qt::ItemFlags flags(const QModelIndex &index) const Q_DECL_OVERRIDE;
    QVariant headerData(int section, Qt::Orientation orientation,
                        int role = Qt::DisplayRole) const Q_DECL_OVERRIDE;
    QModelIndex index(int row, int column,
                      const QModelIndex &parent = QModelIndex()) const Q_DECL_OVERRIDE;
    QModelIndex parent(const QModelIndex &index) const Q_DECL_OVERRIDE;
    int rowCount(const QModelIndex &parent = QModelIndex()) const Q_DECL_OVERRIDE;
    int columnCount(const QModelIndex &parent = QModelIndex()) const Q_DECL_OVERRIDE;
 
protected:
    QHash<int, QByteArray> roleNames() const;
 
private:
    TreeItem *rootItem;
};

here's the code of the TreeView

TreeView {
        id: view
        anchors.fill: parent
        anchors.margins: 2 * 12 + row.height
        model: treeModel
        selection: selectionModel
 
        headerVisible: false
 
        itemDelegate:
            Component {
            id: dragDelegate
 
            MouseArea {
                id: dragArea
 
                property bool held: false
 
                height: content.height
 
                drag.target: held ? content : undefined
                drag.axis: Drag.YAxis
 
                onPressAndHold: held = true
                onReleased: held = false
 
                Rectangle {
                    id: content
                    anchors {
                        horizontalCenter: parent.horizontalCenter
                        verticalCenter: parent.verticalCenter
                    }
                    width: dragArea.width
                    height: 20
                    Text{
                        anchors.verticalCenter: parent.verticalCenter
                        text: styleData.value
                    }
 
                    border.width: 1
                    border.color: "lightsteelblue"
                    color: dragArea.held ?
                               "lightsteelblue" : "green"
                    Behavior on color { ColorAnimation { duration: 100 } }
                    radius: 2
                    states: State {
                        when: dragArea.held
 
                        ParentChange { target: content; parent: root }
                        AnchorChanges {
                            target: content
                            anchors { horizontalCenter: undefined; verticalCenter: undefined }
                        }
                    }
                }
            }
        }
 
        TableViewColumn {
            title: "Name"
            role: "Title"
            resizable: true
 
        }
 
        onClicked: {
            console.log("clicked", index)
        }
 
        onDoubleClicked: {
            console.log("double clicked " + index)
            clickedIndex = index
            console.log("DoubleClickedIndex " + clickedIndex)
            textEditRect.visible = true;
            textEdit.text = fileSystemModel.data(index, "Title")
            textEditRect.forceActiveFocus()
            isExpanded(index) ? collapse(index) : expand(index)
        }
    }