【发布时间】：2016-10-17 11:43:03
【问题描述】：
我实现了一个 Gridview，其中包含不同的图像，我需要将项目拖出网格视图并将其放置在 DropArea 中。我关注了How to drag an item outside a ListView in QML 但现在我的网格项目可以在页面的任何地方拖动。我需要将其限制为 DropArea。 它还存在网格项目的分层问题。我正在尝试将拖动的图块带到最顶层的视图 我对 Qt 完全陌生
这是我的代码
import QtQuick 2.0
Item {
id: media_item
anchors.fill: parent
Rectangle
{
y: 100
id: holder_box
width: 450
height: 150
color: "#99000000"
radius: 5
GridView {
id: grid
anchors.fill: parent
model: mediaModel
delegate: Item {
id: main_item
width: grid.cellWidth;
height: grid.cellHeight
Rectangle {
id: item; parent: grid
color: mediagraphic
x: main_item.x; y: main_item.y
width: 100; height: 100;
Behavior on x { NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
Behavior on y { NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
}
Drag.active: mouseArea.drag.active
Drag.hotSpot.x: main_item.width / 2
Drag.hotSpot.y: main_item.height / 2
MouseArea {
id: mouseArea
anchors.fill: main_item
drag.target: main_item
drag.onActiveChanged: {
if (mouseArea.drag.active) {
grid.dragItemIndex = index;
}
main_item.Drag.drop();
}
}
states: [
State {
name: 'dragged'
when: main_item.Drag.active
PropertyChanges {
target: main_item
x: x
y: y
}
ParentChange
{
target: main_item
parent: topDrag
}
}
]
onStateChanged: console.log('State', state)
}
interactive: false
anchors.topMargin: -30
property int dragItemIndex: -1
}
ListModel {
id: mediaModel
ListElement { mediagraphic: "orchid"
songname: "Song 1"}
ListElement {mediagraphic: "pink"
songname: "Song 2"}
ListElement {mediagraphic: "purple"
songname: "Song 3"}
ListElement {mediagraphic: "lighpink"
songname: "Song 4"}
ListElement {mediagraphic: "blue"
songname: "Song 5"}
ListElement {mediagraphic: "grey"
songname: "Song 6"}
}
Component
{
id: grid_component
Item {
id: main_item
width: grid.cellWidth;
height: grid.cellHeight
Rectangle {
id: item; parent: grid
color: mediagraphic
x: main_item.x; y: main_item.y
width: 100; height: 100;
Behavior on x { NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
Behavior on y { NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
}
Drag.active: mouseArea.drag.active
Drag.hotSpot.x: main_item.width / 2
Drag.hotSpot.y: main_item.height / 2
MouseArea {
id: mouseArea
anchors.fill: main_item
drag.target: main_item
drag.onActiveChanged: {
if (mouseArea.drag.active) {
grid.dragItemIndex = index;
}
main_item.Drag.drop();
}
}
states: [
State {
name: 'dragged'
when: main_item.Drag.active
PropertyChanges {
target: main_item
x: x
y: y
}
ParentChange
{
target: main_item
parent: media_item
}
}
]
onStateChanged: console.log('State', state)
}
}
}
Rectangle
{
id: now_playing_rect
height: parent.height
width: parent.width/2
x: 640
color: "Transparent"
DropArea
{
id: dropArea
width: 200
height: 200
anchors.centerIn: parent
onDropped:
{
song_details.text = grid.model.get(grid.dragItemIndex).songname
selected_song_image.color = grid.model.get(grid.dragItemIndex).mediagraphic
mediaModel.remove(grid.dragItemIndex)
}
}
Rectangle {
id: selected_song_image
width: 200
height: 200
anchors.centerIn: parent
}
Rectangle {
id: next
color: 'green'
anchors.verticalCenter: now_playing_rect.verticalCenter
anchors.left: dropArea.right
width: 50
height: 50
}
Rectangle {
id: previous
color: 'brown'
anchors.verticalCenter: now_playing_rect.verticalCenter
anchors.right: dropArea.left
width: 50
height: 50
}
Text {
id: song_details
text: qsTr("Song Title")
anchors.top: dropArea.bottom
font.pointSize: 30
color: "White"
anchors.horizontalCenter: parent.horizontalCenter
}
}
Item {
id: topDrag
anchors.fill: parent
}
}
【问题讨论】：