Qt QML | Làm sao để chỉ cho phép Drag item sau khi giữ long press (Drag Drop after long press)

Với lập trình giao diện dựa trên công nghệ của Qt QML, ở bài viết trước đây, chúng ta đã biết cách drag drop để thay đổi vị trí item trong list view, ở bài này sẽ là triển khai của một yêu cầu khác liên quan mật thiết.

Giả sử chúng ta cần thực hiện tính năng, chỉ chop phép drag drop sau khi press and hold trong Qt QML. 

import QtQuick 2.4
import QtQuick.Controls 1.3

ApplicationWindow {
    width: 300
    height: 300
    visible: true

    Rectangle {
        id: item
        border.width: 2
        x: 100
        y: 100
        width: 100
        height: 100

        MouseArea {
            id: mouseArea
            anchors.fill: parent
            drag{
                // target:  NOT SET HERE
                minimumX: 0
                minimumY: 0
                maximumX: parent.parent.width - parent.width
                maximumY: parent.parent.height - parent.height
                smoothed: true
            }
            
            state: "BASE"
            states: [
                  State {
                      name: "BASE"
                      PropertyChanges { target: mouseArea; drag.target: undefined}
                      PropertyChanges { target: item; color: "steelblue"}
                  },
                  State {
                      name: "DRAGGABLE"
                      PropertyChanges { target: mouseArea; drag.target: item}
                      PropertyChanges { target: item; color: "darkblue"}
                  }
            ]


            onPressAndHold: {
                mouseArea.state = "DRAGGABLE"
                mouse.accepted = false      // mouse event is USED but NOT CONSUMED...
            }

            onReleased: {
                mouseArea.state = "BASE"         // mouse event acceptation occurs here!
            }
        }
    }
}

TuanTiTien