vue实现按钮随意拖动，松开后留在当前位置

效果

如图所示，在接触到边缘时，会卡在边缘附近，不会移出屏幕，当松开时会停留到当前位置

实现代码

html部分代码

这里简单说一下，addScale是为了让按钮在按下时有个变大，松开变小的效果，需要在data里配一下这个值，addTop和addLeft也是data中配置的，记录按钮所在位置，addmove是一个方法，通过这个方法来调整按钮位置

<!-- 添加按钮 -->
		<image class="addBtn" src="../../static/car/icon_car_add.png" @click="addApply()" @touchmove.stop.prevent="addmove" @touchstart="addScale=120" @touchcancel="addScale=100" @touchend="addScale=100" :style="{'transform': `scale(${addScale}%, ${addScale}%)`, 'left':addLeft,'top':addTop,'z-index':9999}"></image>

script部分代码

计算屏幕宽高部分

我这里写的是组件，调用的生命周期是mounted，如果你不打算写组件，那么我觉得Ready生命周期是比较好的

data部分

data() {
			return {
				// 加号按钮大小变形，按下拖动时变大，松开变小
				addScale:100,
				
				//添加按钮位于页面顶部多少距离
				addTop:'0rpx',
				//添加按钮位于页面左边多少距离
				addLeft:'0rpx',
				// 按钮一半大小，做个偏移，让按钮在中心
				buttonSize:0,
				// 按钮可移动边距
				moveLeft:0,
				moveRight:0,
				moveTop:0,
				moveBottom:0,
			}
		},

逻辑代码部分

mounted() {
			
	if(this.addTop=='0rpx'||this.addLeft=='0rpx'){
		// 获取手机屏幕宽高，为add按钮设置大小，和初始位置
		let height = uni.getSystemInfoSync().windowHeight;
		let width = uni.getSystemInfoSync().windowWidth;
		// 设置边距
		//注意，这个是按钮大小的一半，不要配错了，配错了拖动的就不是按钮中心位置了
		this.buttonSize = (this.rpx2Px(130)/2)
		// 给
		let rpx10 = this.rpx2Px(10) 
		this.moveLeft = rpx10 + this.buttonSize
		this.moveTop = rpx10 + this.buttonSize
		this.moveRight = width - rpx10 - this.buttonSize
		this.moveBottom = height - rpx10 - this.buttonSize 
		
		// 配置add按钮初是位置
		this.addLeft=`${width - (width/4) - this.buttonSize}px`
		this.addTop=`${height - (height/4) - this.buttonSize}px`
	}
},
methods: {
	// 加号按钮拖动
	addmove(e){
		if(e.touches.length>0){
			// x轴移动限制
			let x = e.touches[0].clientX<this.moveLeft?this.moveLeft:e.touches[0].clientX>this.moveRight?this.moveRight:e.touches[0].clientX
			// y轴移动限制
			let y =  e.touches[0].clientY<this.moveTop?this.moveTop:e.touches[0].clientY>this.moveBottom?this.moveBottom:e.touches[0].clientY
			//按钮纠正，不然拖动的不是中心位置，而是左上角边缘位置
			this.addLeft=`${x-this.buttonSize}px`
			
			this.addTop=`${y - this.buttonSize}px`
		}
		
	},
	rpx2Px(rpx) {
	  const screenWidth = uni.getSystemInfoSync().screenWidth
	  return (screenWidth * Number.parseInt(rpx)) / 750
	}
}

后记

这只是完成了基本的业务需求，如果有更多需求的话，还是可以做优化修改的，另外不止是image，哪怕是video标签也可以这么搞变成一个伪小窗视频播放器，所以不要太局限自己的思考能力