在Qml中拖放多个项目

Question

我需要在我的应用程序中绘制一堆矩形。用户应该能够单独选择它们中的每一个，自由移动它们并改变它们的位置。用户还应该能够选择多个矩形，并同时移动所有选中的矩形，并将它们释放到其他地方。我已经可以实现基于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

Answer 1

我没有设法让你的代码工作。首先，我看到了上面的错误:

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

您只需要删除父Item，这是无用的，并设置Rectangle作为代理的根。

然后，你忘了说拖拽的目标是Rectangle

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，因为您希望移动元素。如果你使用Repeater，它可以工作，你只需要在Rectangle中设置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
}

Answer 2

配方一:

1. 使用Repeater，因此定位不是由视图决定的，而是由您自己决定的。

2. 使用一个不可见的助手Item。这是你的drag.target .

3. 实现您喜欢的选择对象的方式-无论是通过点击，还是绘制方框，并执行检查哪些对象包含在此方框中。

设置所有选定对象相对于不可见助手对象的位置。

4. 拖动辅助对象，并相应移动所有其他对象。

5. 完成后，再次取消选择对象并使其位置绝对(在父坐标系内)

配方二:

1. 将所有选中的对象表示为一个新的Item，同时相应地映射它们的坐标

2. 移动新项目

3. 将所有对象重新映射到原始画布，并将其坐标映射回去。

---

我希望这足以解决你的问题(据我所知)如果它解决了另一个问题，那么您需要更具体地说明拖动对象的预期行为。