uniapp 实现拖拽功能

项目需求：

客户要求；微信客服功能悬浮，并且可以在页面进行，拖拽移动，

功能实现：

uniapp中有专门实现拖动效果的组件，以下代码

<movable-area class="movableArea" v-else-if="isShowPhone==0">
                <movable-view class="movableView" direction="all" x="600rpx" y="800rpx">
                    <button>需要移动的元素</button>
                </movable-view>
</movable-area>

movable-area ：可移动的范围

movable-view ：可移动的元素

css部分

.movableArea{position: fixed;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;//设置area元素不可点击，则事件便会下移至页面下层元素
}.movableView{pointer-events: auto;//可以点击
}

欧克 问题解决