CODEWITHSUNDEEP
qtqml
Vishnu Cyruz
Vishnu Cyruz

Reputation: 243

How to bring a list item to front from gridview in QML?

I am creating a media player system in which am listing some songs using grid view. In our application we can drag one song from the list and drop it on a specified area. These all functionalities have been implemented. But the problem is while am dragging, the item is being dragged behind of the other items in the grid view. (ie, If am listing 3 songs, first song is behind of the other 2 songs. second song is behind of the 3rd song but in front of the first song).

Am trying to bring the grid item to front when it is about to drag and drop. Is there any solution for this ?

Upvotes: 0

Views: 1173

Answers (2)

TBF
TBF

Reputation: 102

As mentioned by @derM you may work on z index of GridItem. Here is a sample code that may help you with the same:

Note: The part that concerns your question is the code inside onPressed event of MouseArea within GridItem.

Rectangle{
    width: 1280
    height: 800

    GridView{
        Rectangle{ anchors.fill: parent; color: 'blue'; opacity: 0.2; }
        id: musicBox
        width: 500; height: 500
        model: 10
        anchors.centerIn: parent

        delegate: Rectangle{
            id: songItem
            border{ width: 2; color: 'blue'}
            width: 100; height: 100
            color: (musicBox.currentIndex == index) ? 'yellow' : 'red'

            Text{
                anchors.centerIn: parent
                text: index
                font.pixelSize: 20
            }

            MouseArea{
                anchors.fill: songItem
                drag{
                    minimumX: 0
                    minimumY: 0
                    maximumX: musicBox.width
                    maximumY: musicBox.height
                    axis: Drag.XandYAxis
                    target: songItem
                }
                onPressed:{
                    for(var i = 0; i < musicBox.count; i++){ musicBox.currentIndex = i; musicBox.currentItem.z = i; }
                    musicBox.currentIndex = index
                    musicBox.currentItem.z = musicBox.count
                }
            }
        }
    }
}

Upvotes: 0

dtech
dtech

Reputation: 49289

Instead of dragging the original object, you can create a dedicated drag icon item, and parent it to an invisible item that's on top of the grid view, this way it will be on top of every element in the grid. Create the item when the drag begins and destroy it when the drag ends.

Upvotes: 1

Related Questions