退出鼠标区域时无法取消拖动

Question

我有一个滑块和一个用于滑动滑块的图像，如下所示。

Image
{
    id: slideImg
    source:  "/slider/SliderSelected.png"
    width: 65
    height: 65
    onDragActiveChanged:
    {

        if (!dragActive )
        {
            main.selection (x + slideImg.width/2 , true);
        }
    }
  property bool dragActive: dragArea.drag.active
}

鼠标区域看起来像这样:

MouseArea
{
    id: dragArea
    anchors.fill: thumb
    enabled: !isDisabled
    height: 65
    width: 463
    drag
    {
        readonly property int dragThreshold: 10
        target: thumb
        minimumX: 0
        minimumY: 0
        maximumY:100
        maximumX: mainElement.width - thumb.width
        axis: Drag.XAxis
        threshold: dragThreshold
    }
    onCanceled: {
        console.log("onCanceled ")
    }
    onExited: {
        console.log("onExited ")
        Drag.cancel()
    }

}

当我按住sliderImage并将其滑动到滑块区域外时，我想要取消拖动。拖拽区域应该限制在鼠标区域。如果我们移出鼠标区域，我想取消拖拽。但是，drag .cancel()并没有取消拖动。有没有办法消除阻力?

Answer 1

我不确定，你想通过这个实现什么，但试着取消设置drag.target

onExited: drag.target = null
onEntered: drag.target = myTarget

我想这应该适合你。

但是你可能还想看看状态(有一个拖动状态，只有当鼠标在该区域上时才启用)

MouseArea {
    id: dragArea
    anchors.fill: parent
    states: [
        State {
            when: dragArea.containsMouse
            PropertyChanges {
                target: dragArea
                drag.target: dragger
            }
        }
    ]
}

您可能还想查看X和Y值的最大值和最小值。这可能是你真正想要的东西。
我不认为自动重置位置是可能的，但是你可以很容易地自己处理，通过将ne值存储在一个额外的变量中，一旦你合法地结束拖动，并恢复它们，一旦你没有。

我希望我能帮到你!