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;//可以点击
}

欧克 问题解决