QML ListView拖拽问题：DropArea始终定位首个元素

问题根源 #

DropArea始终绑定到首个元素，核心问题有两点：

1. 错误的ID引用：拖拽热点（hotSpot）使用了DelegateModel中所有实例共享的textListDelegateItem ID，导致始终取第一个元素的尺寸，造成拖拽位置偏移，DropArea检测逻辑失效。
2. 索引逻辑缺陷：使用DelegateModel.itemsIndex作为元素索引，在模型元素移动后会出现同步延迟；且移动模型时未处理源索引小于目标索引的边界情况，导致插入位置错误。

修复方案 #

1. 修正拖拽热点计算 #

在TextListDelegate.qml中，将Drag.hotSpot的取值改为当前Delegate实例的属性，避免跨实例ID引用：

Drag.hotSpot.x: delegateRoot.width / 2
Drag.hotSpot.y: delegateRoot.height / 2

2. 替换索引取值方式 #

将visualIndex改为直接关联底层ListModel的真实索引，避免DelegateModel内部索引的同步问题：

property int visualIndex: DelegateModel.modelIndex

3. 完善模型移动逻辑 #

处理源索引小于目标索引的边界情况，确保元素插入到目标行上方：

onDropped: {
    var sourceIndex = drag.source.visualIndex;
    var targetIndex = delegateRoot.visualIndex;
    
    // 源在目标之前时，目标索引需减1（源元素移走后目标位置前移）
    if (sourceIndex < targetIndex) {
        targetIndex -= 1;
    }
    
    // 避免无效的同位置移动
    if (sourceIndex !== targetIndex) {
        listOfStringsModel.move(sourceIndex, targetIndex, 1);
    }
}

4. 优化拖拽时的事件处理 #

长按拖拽时禁用原Delegate的MouseArea，避免干扰其他DropArea的事件检测：

onPressAndHold: {
    held = true;
    textEntryContainerRect.opacity = 0.5;
    delegateRoot.enabled = false;
}
onReleased: {
    if (held === true) {
        held = false;
        textEntryContainerRect.opacity = 1;
        textEntryContainerRect.Drag.drop();
        delegateRoot.enabled = true;
    }
}

5. 调整DropArea层级 #

将DropArea放在拖拽元素之前定义，确保它在拖拽元素的下层，不会被遮挡导致检测失效：

MouseArea {
    id: delegateRoot

    // ... 其他属性 ...

    // 先定义DropArea，确保层级在拖拽元素之下
    DropArea {
        id: dropArea
        anchors.fill: parent
        // ... 修正后的onDropped逻辑 ...
    }

    Rectangle {
        id: textEntryContainerRect
        // ... 拖拽相关属性 ...
    }
}

完整修正代码 #

DragDropEx.qml #

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQml.Models 2.1

Window {
    width: 784; height: 250; visible: true;

    Flickable {
        anchors.fill: parent

        property var listOfStrings: ["Hello", "world", "I", "need", "help"]
        ListModel { id: listOfStringsModel }

        Component.onCompleted: {
            if (visible) {
                listOfStringsModel.clear();
                for (var i = 0; i < listOfStrings.length; i++) {
                    listOfStringsModel.append({ "textEntry": listOfStrings[i] });
                }
                textListView.currentIndex = listOfStrings.length - 1;
            }
        }

        Rectangle {
            anchors.fill: parent; color: "lightblue"

            ListView {
                id: textListView
                x: 10; y: 10; width: parent.width - 20; height: parent.height - 20
                spacing: 4
                model: DelegateModel {
                    id: visualModel
                    model: listOfStringsModel
                    delegate: TextListDelegate {
                        height: 32; width: parent.width - 16
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                }
            }
        }
    }
}

TextListDelegate.qml #

import QtQuick 2.10
import QtQuick.Controls 2.3
import QtQml.Models 2.1

MouseArea {
    id: delegateRoot

    property bool held: false
    property int visualIndex: DelegateModel.modelIndex

    drag.target: held ? textEntryContainerRect : undefined
    drag.axis: Drag.YAxis
    drag.filterChildren: true   // 避免TextField干扰拖拽事件

    onPressAndHold: {
        held = true;
        textEntryContainerRect.opacity = 0.5;
        delegateRoot.enabled = false;
    }
    onReleased: {
        if (held === true) {
            held = false;
            textEntryContainerRect.opacity = 1;
            textEntryContainerRect.Drag.drop();
            delegateRoot.enabled = true;
        }
    }

    DropArea {
        id: dropArea
        anchors.fill: parent
        onDropped: {
            var sourceIndex = drag.source.visualIndex;
            var targetIndex = delegateRoot.visualIndex;
            
            if (sourceIndex < targetIndex) {
                targetIndex -= 1;
            }
            
            if (sourceIndex !== targetIndex) {
                listOfStringsModel.move(sourceIndex, targetIndex, 1);
            }
        }
        Rectangle {
            anchors.fill: parent
            color: "hotpink"
            visible: parent.containsDrag
        }
    }

    Rectangle {
        id: textEntryContainerRect
        anchors.fill: parent

        Drag.active: delegateRoot.drag.active
        Drag.source: delegateRoot
        Drag.hotSpot.x: delegateRoot.width / 2
        Drag.hotSpot.y: delegateRoot.height / 2

        states: [
            State {
                when: textEntryContainerRect.Drag.active

                ParentChange {
                    target: textEntryContainerRect
                    parent: textListView
                }

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

        TextField {
            id: textListEntryField
            anchors { fill: parent; leftMargin: 8 }
            height: 30; text: textEntry
        }
    }
}

效果验证 #

现在长按任意行拖拽，DropArea会正确显示在鼠标悬停的行上，松开后元素会准确插入到目标行的上方，完全符合需求。该方案兼容多字段模型、TextField等复杂场景。

内容的提问来源于stack exchange，提问作者Thalia