Simultaneous mousearea drag event



  • Hi,

    My problem is: how can I manage two simultaneaous mousearea drag events in QtQuick QML?

    I would like to drag two images in the same time (like 2 joysticks).
    I did the following with images in mouseareas :
    alt text

    But it works only for one mousearea at a time.

    I had a look at multipletoucharea but I didn't manage to bind it to MouseArea to keep drag events.

    Thanks ,



  • I finally succeed to create this using 2 MultiPointTouchArea but I had to write drag function on touchUpdated event.

    Here is my code for one drag area:

    import QtQuick 2.0
    
    Item{
       id: joystick
       width: 100
       height: 500
    
       Rectangle{
          id: joystickPad
          height: 50
          width: 100
    
          MultiPointTouchArea{
             property var offset: null
    
             anchors.fill:parent
    
             minimumTouchPoints: 1
             maximumTouchPoints: 1
    
             function dragMove(point) {
                if (point) {
                   var position = joystick.mapFromItem(joystickPad, point.x, point.y);
                      /* Change y axis */
                      if((position.y - offset.y) < 0)
                      {
                         /* Do not go on top of drag area */
                         joystickPad.y = 0;
                      }
                      else
                      {
                         if((position.y - offset.y) > (joystick.height-joystickPad.height))
                         {
                            /* Do not go below of drag area */
                            joystickPad.y = (joystick.height-joystickPad.height);
                         }
                         else
                         {
                            joystickPad.y = position.y - offset.y;
                         }
                      }
                }
             }
    
             onPressed: {
                var point = touchPoints[0];
                offset = Qt.point(point.x, point.y);
             }
    
             onTouchUpdated: {
                var point = touchPoints[0];
                dragMove(point);
             }
    
             onReleased: {
                //Reset position
                joystickPad.x = (joystick.width/2 - joystickPad.width/2)
                joystickPad.y = (joystick.height/2 - joystickPad.height/2)
             }
          }
       }
    }