你有沒有遇到過在頁面中有一個固定在某個位置的按鈕，永遠的擋住了你想要看的區域？
在小程序的列表頁面中，常常會有一個提報的入口固定在右下角，如果這個按鈕不可拖動的話，可能會擋住下面的事件，讓用戶操作起來不方便。因此，將這種提報的按鈕做成可拖拽的是很有必要的。
在使用uni-app開發小程序時，會發現這個功能實現起來很簡單。
movable-area
uni-app中有這樣一個內置組件，它可以定義一個可以拖動的范圍，讓你的組件在這個范圍內可拖動。
movable-view
當然，只有一個可拖動的范圍是不夠的，總不能在這個范圍內任何組件都可以被拖動吧，那這樣頁面就會變得很凌亂。于是乎有了一個新的內置組件
可移動的容器，包含在這個容器中的組件是可以被拖動的。
實現
兩個需要配合起來，就可以實現可拖動的按鈕啦。
<view :style="'overflow: hidden;height:' + heightPage"><movable-area style="width:100%;height:100%"><view>...頁面內容實現</view><movable-viewstyle="width:60px;height:60px;top:calc(100% - 72px);left:calc(100% - 76px)"direction="all"><imagesrc="./static/report.png"@click="goToDetail"style="width: 60px; height: 60px"></image></movable-view></movable-area></view>
這樣的話就可以在頁面實現可拖動的按鈕了，如果想調整可拖動范圍的大小，只要修改movable-area組件的大小就可以了。
