Glitching when dragging

Question

I have a very simple code for drag and drop in qml.

But when you are dragging the rectangle while holding mouse the screen of window is glitched! and sometimes the color of some Rectangle vanishes.

Like this bug is reported, but not answered.

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.14
import QtQml.Models 2.1


Window {
    id: mainWindow
    width: 700
    height: 800
    visible: true

    color: 'grey'

    Item {
        anchors.fill: parent
    GridView {
        id: root
        width: 320; height: 480
        cellWidth: 80; cellHeight: 80
        pixelAligned: true

        displaced: Transition {
            NumberAnimation { properties: "x,y"; easing.type: Easing.OutQuad }
        }

        model: DelegateModel {
            id: visualModel
            model: ListModel {
                id: colorModel
                ListElement { color: "blue" }
                ListElement { color: "green" }
                ListElement { color: "red" }
                ListElement { color: "yellow" }
                ListElement { color: "orange" }
                ListElement { color: "purple" }
                ListElement { color: "cyan" }
                ListElement { color: "magenta" }
                ListElement { color: "chartreuse" }
                ListElement { color: "aquamarine" }
                ListElement { color: "indigo" }
                ListElement { color: "black" }
                ListElement { color: "lightsteelblue" }
                ListElement { color: "violet" }
                ListElement { color: "grey" }
                ListElement { color: "springgreen" }
                ListElement { color: "salmon" }
                ListElement { color: "blanchedalmond" }
                ListElement { color: "forestgreen" }
                ListElement { color: "pink" }
                ListElement { color: "navy" }
                ListElement { color: "goldenrod" }
                ListElement { color: "crimson" }
                ListElement { color: "teal" }
            }
            delegate: DropArea {
                id: delegateRoot

                width: 80; height: 80

                onEntered: visualModel.items.move(drag.source.visualIndex, icon.visualIndex)
                property int visualIndex: DelegateModel.itemsIndex
                Binding { target: icon; property: "visualIndex"; value: visualIndex }

                Rectangle {
                    id: icon
                    property int visualIndex: 0
                    width: 72; height: 72
                    anchors {
                        horizontalCenter: parent.horizontalCenter;
                        verticalCenter: parent.verticalCenter
                    }
                    radius: 3
                    color: model.color

                    Text {
                        anchors.centerIn: parent
                        color: "white"
                        text: parent.visualIndex
                    }

                    DragHandler {
                        id: dragHandler
                    }

                    Drag.active: dragHandler.active
                    Drag.source: icon
                    Drag.hotSpot.x: 36
                    Drag.hotSpot.y: 36

                    states: [
                        State {
                            when: icon.Drag.active
                            ParentChange {
                                target: icon
                                parent: root
                            }

                            AnchorChanges {
                                target: icon
                                anchors.horizontalCenter: undefined
                                anchors.verticalCenter: undefined
                            }
                        }
                    ]
                }
            }
        }
    }}

}

Before:

After:

S At · Answer

With add attribute of open-gl in main.cpp

QCoreApplication::setAttribute(Qt::AA_UseOpenGLES);

Stephen Quan · Answer

@SAt looks like you found the issue with your rendering engine. Sometimes there are quirks like that in your graphics card and may require updating your graphics driver. Otherwise, as you found, see the other rendering options with QCoreApplication::setAttribute() or by setting the QT_OPENGL environment variable:

Qt::AA_UseDesktopOpenGL Equivalent to setting QT_OPENGL to desktop.
Qt::AA_UseOpenGLES Equivalent to setting QT_OPENGL to angle.
Qt::AA_UseSoftwareOpenGL Equivalent to setting QT_OPENGL to software.

References:

Parisa.H.R · Answer

I test your code in my system and it works well.

My OS is Ubuntu 20.04.

My Qt Version is 5.15.2 and 6.2.3 I checked in both.

This is the Result:

Glitching when dragging

3 Answers