Drag and Drop within a GridView/bg

This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine. Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean.

En Ar Bg De El Es Fa Fi Fr Hi Hu It Ja Kn Ko Ms Nl Pl Pt Ru Sq Th Tr Uk Zh

Тази статия е създадена заради няколко теми във форума (линковете са в края на статията), в които се пита за такъв метод. Чувствайте се свободни да добавяте коментари и код.

Влачене и пускане на елементи в GridView

Този пример ще покаже влачене и пускане на елелемeнти в GridView по подобен на iOS начин (видео ).

В примера има 3 файла. Един за модела (WidgetModel.qml), един за делегата (IconItem.qml) и един за GridView (Main.qml).

WidgetModel.qml

import QtQuick 1.0

ListModel {
 ListElement { icon: "Images/widget1.png"; gridId: 0}
 ListElement { icon: "Images/widget2.png"; gridId: 1}
 ListElement { icon: "Images/widget3.png"; gridId: 2}
 ListElement { icon: "Images/widget4.png"; gridId: 3}
 ListElement { icon: "Images/widget5.png"; gridId: 4}
 ListElement { icon: "Images/widget6.png"; gridId: 5}
 ListElement { icon: "Images/widget7.png"; gridId: 6}
 ListElement { icon: "Images/widget8.png"; gridId: 7}
 ListElement { icon: "Images/widget9.png"; gridId: 8}
}

IconItem.qml

import QtQuick 1.0

Component {
 Item {
 id: main
 width: grid.cellWidth; height: grid.cellHeight
 Image {
 id: item; parent: loc
 x: main.x + 5; y: main.y + 5
 width: main.width - 10; height: main.height - 10;
 fillMode: Image.PreserveAspectFit; smooth: true
 source: icon
 Rectangle {
 anchors.fill: parent;
 border.color: "#326487"; border.width: 6
 color: "transparent"; radius: 5
 visible: item.state  "active"
            }
            Behavior on x { enabled: item.state != "active"; NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
            Behavior on y { enabled: item.state != "active"; NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
            SequentialAnimation on rotation {
                NumberAnimation { to:  2; duration: 60 }
                NumberAnimation { to: -2; duration: 120 }
                NumberAnimation { to:  0; duration: 60 }
                running: loc.currentId != -1 && item.state != "active"
                loops: Animation.Infinite; alwaysRunToEnd: true
            }
            states: State {
                name: "active"; when: loc.currentId  gridId
 PropertyChanges { target: item; x: loc.mouseX - width/2; y: loc.mouseY - height/2; scale: 0.5 }
 }
 transitions: Transition { NumberAnimation { property: "scale"; duration: 200} }
 }
 }
}

Main.qml

import QtQuick 1.0

Rectangle {
 width: 640; height: 480
 color: "#222222"
 GridView {
 id: grid
 interactive: false
 anchors {
 topMargin: 60; bottomMargin: 60
 leftMargin: 140; rightMargin: 140
 fill: parent
 }
 cellWidth: 120; cellHeight: 120;
 model: WidgetModel { id: icons }
 delegate: IconItem { }
 MouseArea {
 property int currentId: –1 // Original position in model
 property int newIndex // Current Position in model
 property int index: grid.indexAt(mouseX, mouseY) // Item underneath cursor
 id: loc
 anchors.fill: parent
 onPressAndHold: currentId = icons.get(newIndex = index).gridId
 onReleased: currentId = –1
 onMousePositionChanged:
 if (loc.currentId [[Image:= -1 && index |= -1 && index ]]= –1 && index != newIndex)
 icons.move(newIndex, newIndex = index, 1)
 }
 }
}

Video https://www.youtube.com/watch?v=4tt5hQYS4Fo

Теми от форума: iOS Style Rearrange of Icons QML and Drag and Drop