Drag&Drop Menue with SplitView and GridView

[Rusticus]

Hello,

I try to realise a menu with a SplitView and a GridView to select the items, which can be dropped into a repeater (later).

I have now two problems to solve:

• The items in the GridView will change it's position when I drag them and there are not "in grid" any more. I tried to use a grabItem as proposed on StackOverflow but that only leads to no movement at all.

• The items can't leave the GridView and will just hide when I try to change to the other side of the SplitView

SplitView{
        anchors.fill: parent
        id: splitView
        Pane{
            Material.elevation: 10
            SplitView.minimumWidth: 130
            SplitView.preferredWidth: 130
            SplitView.maximumWidth: 355
            GridView{
                id: selectableItems
                anchors.fill: parent
                clip: true
                cellWidth: 110
                cellHeight: 125
                model: andonModel.getSelectableItems()
                delegate: Item{                    
                    Rectangle{
                        width: selectableItems.cellWidth
                        height: selectableItems.cellHeight
                        radius: 5
                        color: "transparent"
                        border.color: ma.containsMouse ? "black" : "transparent"


                        Image{
                            anchors.topMargin: 5
                            anchors.top: parent.top
                            anchors.horizontalCenter: parent.horizontalCenter
                            id: previewImage
                            source: "file:///" + applicationDirPath +"/images/previews/" + preview
                        }
                        Label{
                            anchors.top: previewImage.bottom
                            anchors.horizontalCenter: parent.horizontalCenter
                            Layout.alignment: Qt.AlignHCenter
                            text: name
                        }

                        MouseArea{
                            id: ma
                            anchors.fill: parent
                            hoverEnabled: true
                            drag.target: this // with drag.target: parent it is working but moving, see problem 1
                            onPressed:{ 
                                parent.grabToImage(function(result) {
                                    console.log( name )
                                    console.log( result.url )
                                    parent.Drag.imageSource = result.url
                                })                  
                                
                            }
                        }

                    }
                }
            }
        }
        Pane{
            Material.elevation: 10
            SplitView.fillWidth: true

            background: Image{
                source: andonModel.backgroundImage
            }
            DropArea{
                anchors.fill: parent

            }

            MouseArea{
                anchors.fill: parent
                acceptedButtons: Qt.LeftButton | Qt.RightButton
                onClicked: (mouse ) => {
                    if (mouse.button === Qt.RightButton)
                        contextMenu.popup()                            
                }
                onPressAndHold: (mouse) => {
                    if (mouse.source === Qt.MouseEventNotSynthesized)
                        contextMenu.popup()
                }
            }
        }
    }