Qt 在Qml中拖放多个项

我需要在我的应用程序中绘制一组矩形。用户应该能够单独选择它们中的每一个，自由移动它们并改变它们的位置。用户还应该能够选择多个矩形，同时移动所有选定的矩形并将其释放到其他地方。 我已经可以基于Gridview实现一些东西，可以处理一个矩形的选择和移动，但是我不能使它适用于多个选择/移动。以下是我目前拥有的一段代码：

GridView { 
        id: mainGrid
        cellWidth: 7;
        cellHeight: 7;

        ListModel {
            id: myModel
            function createModel() {
                for(var i = 0; i < totalZoneList.length; i++)
                {
                    for (var j = 0; j < moduleZoneList.length; j++)
                    {
                         myModel.append({"item1": ITEM1, "item2": ITEM2})
                    }
                }
            }
            Component.onCompleted: {createModel()}
        }

        Component { 
            id: myblocks
            Item {
                id: item
                width: mainGrid.cellWidth; 
                height: mainGrid.cellHeight;
                Rectangle {
                    id: box
                    parent: mainGrid
                    x: //CALCULATED BASED ON MODEL
                    y: //CALCULATED BASED ON MODEL
                    width: //CALCULATED BASED ON MODEL
                    height: //CALCULATED BASED ON MODEL


                    MouseArea {
                        id: gridArea
                        anchors.fill: parent
                        hoverEnabled: true
                        drag.axis: Drag.XandYAxis
                        drag.minimumX: 0
                        drag.minimumY: 0


                        property int mX: (mouseX < 0) ? 0 : ((mouseX < mainGrid.width - mainGrid.cellWidth) ? mouseX : mainGrid.width - mainGrid.cellWidth)
                        property int mY: (mouseY < 0) ? 0 : ((mouseY < mainGrid.height - mainGrid.cellHeight) ? mouseY : mainGrid.height - mainGrid.cellHeight)
                        property int index: parseInt(mX/mainGrid.cellWidth) + 5*parseInt(mY/mainGrid.cellHeight)  //item underneath cursor
                        property int activeIndex
                        property var xWhenPressed
                        property var yWhenPressed
                        propagateComposedEvents: true

                        onPressed: {
                            activeIndex = index
                            drag.target = box
                            xWhenPressed = box.x
                            yWhenPressed = box.y

                            gridArea.drag.maximumX = mainGrid.width - box.width
                            gridArea.drag.maximumY = mainGrid.height - box.height
                        }
                        onReleased: {
                           if(xWhenPressed !== box.x || yWhenPressed !== box.y)
                            {
                              //RECALCULATE THE POSITION
                            }
                        }
                        onPositionChanged: {
                            if (drag.active && index !== -1 && index !== activeIndex) {
                                                            mainGrid.model.move(activeIndex, activeIndex = index, 1)
                            }
                        }
                    } // Mousearea
                } // Rectangle
            } // Item
        } // Component

    } //mainGrid

GridView{
id:主栅格
细胞宽度：7；
单元高度：7；
列表模型{
id:myModel
函数createModel（）{
对于（变量i=0；i

我没能让你的代码正常工作。首先，我看到了错误：

Rectangle {
    id: box
    parent: mainGrid
...
}

您只需删除无用的父

项

，并将

矩形

设置为代理的根

然后，您忘了提到拖动的目标是

矩形

drag.target: parent

下面是更正后的代码：

Component {
    id: myblocks

    Rectangle {
        id: box
        color: "red"
        width: 20
        height: 20

        MouseArea {
            id: gridArea
            anchors.fill: parent
            drag.target: parent
            hoverEnabled: true
            drag.axis: Drag.XandYAxis
        } // Mousearea
    } // Rectangle
} // Component

然后，您不应该使用

GridView

，因为您希望移动元素。如果您使用

中继器

，它可以工作，您只需在

矩形

中设置

x

和

y

，即可将元素放置在开头

现在，这是问题的解决方案：单击一个元素以选择它，然后可以一次移动所有选定的项

Window {
    visible: true
    width: 640
    height: 480

    property var totalZoneList: ["total1", "total2"]
    property var moduleZoneList: ["module1", "module2"]

    Repeater{
        id: iRepeater
        model: ListModel {
                    id: myModel
                    function createModel() {
                        for(var i = 0; i < totalZoneList.length; i++)
                        {
                            for (var j = 0; j < moduleZoneList.length; j++)
                            {
                                myModel.append({"item1": totalZoneList[i], "item2": moduleZoneList[j]})
                            }
                        }
                    }
                    Component.onCompleted: {createModel()}
                }
        delegate: myblocks

    }

    Component {
        id: myblocks

        Rectangle {
            id: box
            color: {
                switch(index){
                case 0: selected ? "red" : "#FF9999";break;
                case 1: selected ? "blue" : "lightblue";break;
                case 2: selected ? "green" : "lightgreen";break;
                case 3: selected ? "grey" : "lightgrey";break;
                }
            }
            x: (width + 5)*index

            width: 20
            height: 20
            property int offsetX:0
            property int offsetY:0
            property bool selected: false
            function setRelative(pressedRect){
                disableDrag();
                x = Qt.binding(function (){ return pressedRect.x + offsetX; })
                y = Qt.binding(function (){ return pressedRect.y + offsetY; })
            }
            function enableDrag(){
                gridArea.drag.target = box
            }
            function disableDrag(){
                gridArea.drag.target = null
            }

            MouseArea {
                id: gridArea
                anchors.fill: parent
                hoverEnabled: true
                drag.axis: Drag.XandYAxis
                onClicked: parent.selected=!parent.selected

                onPressed: {

                    var pressedRect = iRepeater.itemAt(index);
                    if (pressedRect.selected == true){
                        for (var i=0; i<iRepeater.count; i++ ){
                            var rect = iRepeater.itemAt(i);
                            if (i != index){
                                //init for breaking existing binding
                                rect.x = rect.x
                                rect.y = rect.y
                                rect.disableDrag()
                                if (rect.selected == true){
                                    rect.offsetX = rect.x - pressedRect.x
                                    rect.offsetY = rect.y - pressedRect.y
                                    rect.setRelative(pressedRect)
                                }
                            }
                        }
                        pressedRect.enableDrag()
                    }
                }
            } // Mousearea
        } // Rectangle
    } // Component
}

窗口{
可见：正确
宽度：640
身高：480
属性变量totalZoneList:[“total1”、“total2”]
属性变量moduleZoneList:[“module1”、“module2”]
中继器{
id:iRepeater
模型：ListModel{
id:myModel
函数createModel（）{
对于（变量i=0；i