Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Dragable Rectangle won't drag as a child of a Scroll View unless I remove content width & height.



  • Hello,
    I can't seem to get drag functionality on these draggable rectangles I have in my project. You can download and view the code from this repo:

    https://github.com/joejoe909/QMLZoomEnviorment
    pull: https://github.com/joejoe909/QMLZoomEnviorment.git

    I have three files Dragable - dragable QML component that uses the MouseArea.
    McIda - this is a rectangle that uses Dragable and Dragable is a child of McIda.
    main.qml - this has a mouse area which lets you zoom out via ctrl + wheel it also has a scroll area that ideally will alow you to zoom out from 1 to .1. This works but.....

    in main.qml on lines 17 and 18 by cementing out we get the desired drag functionality and zoom but lose
    scroll functionality. When uncommenting we get scroll capability but drag is compromised.

    Any guidance would be much appreciated. Thanks.

    I've also pasted all the code below.

    main.qml

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.3
    
    Window {
        id: root
        visible: true
        width: 640
        height: 480
        title: qsTr("Zoom Enviorment")
        color: "gray"
    
    
        ScrollView{
            id: scrollVw
            anchors.fill: parent
            contentWidth: mindScape.width   // comment these to gain drag functionality
            contentHeight: mindScape.height //  uncomment to get get scroll capability.
            clip: true
              
    
    
            //Zoom Functionality.
            MouseArea {
                anchors.fill: parent
                acceptedButtons: Qt.NoButton
                hoverEnabled: false
    
    
                onPositionChanged: {
                    root.title ="Zoom Enviorment " + mindScape.scale  + " mouse position: " + mouseX + "," + mouseY
                }
    
                onWheel: {
                    wheel.accepted = true
                    if(wheel.modifiers & Qt.ControlModifier)
                    {
    
                        if (wheel.angleDelta.y > 0)
                        {
    
                            //see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed
                            mindScape.scale = Number((mindScape.scale + mindScape.zoomStep).toFixed(1))
                            root.title ="Zoom Enviorment " + mindScape.scale + " mouse position: " + mouseX + "," + mouseY
                        }else if(wheel.angleDelta.y < 0){
                            mindScape.scale = Number((mindScape.scale - mindScape.zoomStep).toFixed(1));  //toFixed(n) - will formats number using fixed point notation
                            root.title ="Zoom Enviorment " + mindScape.scale  + " mouse position: " + mouseX + "," + mouseY
                        }
    
                    }
                }
    
    
    
            }//end mouseArea
    
                Rectangle{
                    id: mindScape
                    x: 0; y: 0; width: 10000; height: 10000
                    color: "blue"
                    scale: 1
                    property real zoom: 0.0
                    property real zoomStep: 0.1
    
                    McIda{
                       x: 300; y: 25; width: 250; height: 150
                    }
    
                    McIda{
                       x: 25; y: 25; width: 250; height: 150
                    }
    
                   }
    
    
                }//end scrollView
    
    //    }
    
    }
    

    Dragable.qml

    import QtQuick 2.0
    import QtGraphicalEffects 1.0
    import QtQuick.Controls 1.5
    //DragFunctionality
    Item {
        id: iT
    
        property bool isDragging
        property int offsetX : 0
        property int offsetY : 0
    
        QtObject {
            id: lastPosition
            property int x : iT.parent.x
            property int y : iT.parent.y
        }
    
        MouseArea {
               id: mouseArea
               anchors.bottomMargin: 0
               anchors.fill: parent
    
               onPressed: {
                   iT.focus = true
                   iT.parent.focus = false
                   iT.isDragging = true;
    
                   var globalMouse = iT.mapToGlobal(mouse.x, mouse.y);
                   iT.offsetX = globalMouse.x - iT.parent.x;
                   iT.offsetY = globalMouse.y - iT.parent.y;
               }
    
               onPositionChanged: {
                   if (iT.isDragging) {
                       //var globalMouse = iT.parent.mapToGlobal(mouse.x, mouse.y);
                       var globalMouse = iT.mapToGlobal(mouse.x, mouse.y);
                       iT.parent.x =  ((lastPosition.x - iT.parent.x) + (globalMouse.x - iT.offsetX));
                       iT.parent.y =  ((lastPosition.y - iT.parent.y) + (globalMouse.y - iT.offsetY));
                   }
               }
    
          }
    
    
    }
    

    McIda.qml

    import QtQuick 2.0
    
    
        Rectangle {
            id: base
            scale: 1 //Math.min(root.width / width, root.height / height, 1) + zoom
            property real zoom: 0.0
            property real zoomStep: 0.1
            color: "#805e00"
    
            Row {
                id: row_top
                anchors.top: parent
                width: parent.width
                height: 10
    
    
    
                Rectangle{
                    anchors.fill: parent
                    color: "green"
    
                }
    
            }
    
            Text {
                id: mousePositionDisp
                text: ""
                x: 10
                y: 10
                color: "black"
            }
    
            Dragable{
                anchors.fill: parent
    
                Text {
                    id: coord
                    text: qsTr("x=" + Number(base.x).toFixed(1) + " " + "y=" + Number(base.y).toFixed(1) + " " + "w=" + base.width + " " + "h=" + base.height  )
                    x: 50
                    y: 50
                }
            }
    
        }
    
    
    


  • Looks like I was able to get it by fixing a few things. (I updated the repo)

    in dragable.qml I added the following to the MouseArea.....

      drag.target: parent
    

    in McIda I added corrected the titleBar rectangle.

      Rectangle{
                    id: titleBar
                    anchors.right: parent.right
                    anchors.left: parent.left
                    anchors.top: parent.top
                    height: 10
                    color: "green"
    
                }
    

    My next concern is when you zoom out the item you drag while zoomed out follows the mouse cursor in proportion to amount you're zoomed out at. The more you zoom out the more your drag trails the mouse cursor.
    Perhaps that's a diffrent question. If you know how to address this it would be great help. As I've encountered this issue when also working with GraphcisView Framework and I'm just not able to also figure that out.


Log in to reply