Un ListView Simple y un Delegado Moviendo Elementos Arrastrados

QML Dynamic View Ordering Tutorial 2 - Arrastrar elementos de la vista

Ahora que tenemos una lista visible de elementos queremos poder interactuar con ellos. Empezaremos por extender el delegado para que el contenido visible pueda ser arrastrado arriba y abajo de la pantalla. El delegado actualizado tiene este aspecto:

    Component {
        id: dragDelegate

        MouseArea {
            id: dragArea

            property bool held: false
            required property string name
            required property string type
            required property string size
            required property int age

            anchors {
                left: parent?.left
                right: parent?.right
            }
            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: column.implicitHeight + 4

                border.width: 1
                border.color: "lightsteelblue"
                color: dragArea.held ? "lightsteelblue" : "white"
                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
                        }
                    }
                }
                Column {
                    id: column
                    anchors {
                        fill: parent
                        margins: 2
                    }

                    Text { text: qsTr('Name: ') + dragArea.name }
                    Text { text: qsTr('Type: ') + dragArea.type }
                    Text { text: qsTr('Age: ') + dragArea.age }
                    Text { text: qsTr('Size: ') + dragArea.size }
                }
            }
        }
    }

Paseo

El principal cambio aquí es que el elemento raíz del delegado es ahora un MouseArea que proporciona manejadores para los eventos del ratón y nos permitirá arrastrar el elemento de contenido del delegado. También actúa como contenedor para el elemento de contenido, lo cual es importante ya que el elemento raíz de un delegado es posicionado por la vista y no puede ser movido por otros medios.

        MouseArea {
            id: dragArea

            property bool held: false
            required property string name
            required property string type
            required property string size
            required property int age

            anchors {
                left: parent?.left
                right: parent?.right
            }
            height: content.height

            drag.target: held ? content : undefined
            drag.axis: Drag.YAxis

            onPressAndHold: held = true
            onReleased: held = false

            Rectangle {
                id: content
            }
        }

El arrastre del elemento de contenido se activa vinculándolo a la propiedad drag.target de MouseArea. Como aún queremos que la vista se pueda mover, esperamos a que se emita la señal pressAndHold de MouseArea antes de enlazar el objetivo de arrastre. De esta forma cuando el ratón se mueve antes de que el tiempo de espera haya expirado se interpreta como un movimiento de la lista y si se mueve después se interpreta como el arrastre de un elemento. Para hacer más obvio al usuario cuando un elemento puede ser arrastrado cambiaremos el color de fondo del elemento de contenido cuando el tiempo de espera haya expirado.

                color: dragArea.held ? "lightsteelblue" : "white"
                Behavior on color { ColorAnimation { duration: 100 } }

La otra cosa que tendremos que hacer antes de que un elemento pueda ser arrastrado es deshacer cualquier ancla en el elemento de contenido para que pueda ser movido libremente. Hacemos esto en un cambio de estado que se activa cuando el elemento delegado se mantiene, al mismo tiempo podemos reparent el elemento de contenido al elemento raíz para que esté por encima de otros elementos en el orden de apilamiento y no se oscurece cuando se arrastra alrededor.

                states: State {
                    when: dragArea.held

                    ParentChange {
                        target: content
                        parent: root
                    }
                    AnchorChanges {
                        target: content
                        anchors {
                            horizontalCenter: undefined
                            verticalCenter: undefined
                        }
                    }
                }

Proyecto de ejemplo @ code.qt.io

Un ListView Simple y un Delegado Moviendo Elementos Arrastrados

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.