uniapp 微信小程序项目开发中，需要实现拖动按钮的效果。通过movable-area结合movable-view我们可以实现想要的效果。

相关组件说明文档

movable-area

movable-view

效果演示

html

<movable-area class="movable-area">
	<movable-view class="movable-view" :x="x" :y="y" direction="all" @change="onChange">
		<div class="setImg" @click="show=true">
			<image src="../../static/home/icon_set.png"></image>
		</div>
	</movable-view>
</movable-area>

css

我们首先要设置movable-area大小，也就是我们的按钮可以拖动的区域。
然后我们设置需要拖动的组件movable-view的大小。

.movable-area {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 100;
}

.movable-view {
	width: 90rpx;
	height: 90rpx;
}

js

data存储位置信息，tap和onChange方法用来处理拖动后的坐标变化。

data() {
	return {
		show: false,
		x: 320,
		y: 500,
		old: {
			x: 0,
			y: 0
		}
	}
},

tap: function(e) {
	this.x = this.old.x
	this.y = this.old.y
	this.$nextTick(function() {
		this.x = 30
		this.y = 30
	})
},
onChange: function(e) {
	this.old.x = e.detail.x
	this.old.y = e.detail.y
},