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

Posted 2023-02-16

【中文标题】退出鼠标区域时无法取消拖动

【英文标题】：Not able to cancel the drag when we exit mouse area

【发布时间】：2016-08-30 07:28:42

【问题描述】：

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

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() 并没有取消拖动。有什么办法可以取消拖拽？

【参考方案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 值存储在一个额外的变量中来轻松地处理你自己，一旦你合法地结束了拖动，一旦你不这样做，就恢复它们。

希望能帮到你！