QML控件拖动并靠边停留

前言

用QML做控件拖动，当鼠标按下要拖动的按钮然后移动鼠标，控件坐标会随着鼠标而移动，释放鼠标后判断当前的控件位置，然后选择要停留在父窗口的左边还是右边，再通过动画将控件移动到边上。这种场景在做工具栏悬浮按钮的时候比较常见。

正文

实现方式很简单，通过Drag类来实现，并且参考了Qt帮助文档中的示例。
直接上代码吧

import QtQuick 2.6  Item {      id:root      width: 500; height: 400      Rectangle {          id:rect          x: 10; y: 10          width: 50; height: 50          color: "red"          NumberAnimation on x{              id:ani              duration: 400              easing.type: Easing.OutCubic          }          Drag.active: dragArea.drag.active          MouseArea {              id: dragArea              anchors.fill: parent              drag.target: parent              drag.maximumY:root.height-rect.height              drag.minimumY: 0              onPositionChanged: {                  console.log("x",mouseX,"y",mouseY,rect.x,rect.y)              }              onReleased: {                  if(rect.x > root.width/2.){                      ani.to = root.width - rect.width                      ani.start()                  }                  else{                      ani.to = 0                      ani.start()                  }              }          }      }  }

来看看效果图