vue在屏幕任意位置拖动一个div，可以改变div的大小

<template>
	<div @click="clickdrag" style="width: 1500px;height: 940px;">
		<div id="dragroi" class="box" @click="clickdrag"
			:style="{width: form.pw-4 +'px',height: form.ph-4 +'px',top: form.py +'px',left: form.px +'px',}">
			<div id="touchmovewidthright" class="onleft"></div>
			<div id="ontouchmovecenter" class="oncenter" :style="{left: form.pw/2-5 +'px',}"></div>
			<div id="touchmovewidthleft" class="onright" :style="{left: form.pw-5 +'px',}"></div>
			<div id="touchmovewidthleft" class="downleft"></div>
			<div id="downtouchmovecenter" class="downcenter" :style="{left: form.pw/2-5 +'px',}"></div>
			<div id="downtouchmovewidthright" class="downright" :style="{left: form.pw-5 +'px',}"></div>
			<div id="arighttouchmove" class="aright" :style="{top: form.ph/2 +'px',}"></div>
			<div id="alefttouchmove" class="aleft" :style="{left: form.pw-5 +'px',top: form.ph/2 +'px',}">
			</div>
		</div>
	</div>
</template>
<script>
	import testhe from './testheight.vue'
	import Vue from 'vue';
	export default {
		props: ['arr', 'gidx'],
		data() {
			return {
				form: {
					px: 200,
					py: 200,
					ph: 200, // 设置第一个div的高度
					pw: 300, // 设置第一个div的宽度
				}
			}
		},
		components: {
			testhe,
		},
		mounted() {
			document.getElementById("dragroi").onmousedown = this.textROIChange;
			document.getElementById("ontouchmovecenter").onmousedown = this.textHeightChangeOn;
			document.getElementById("downtouchmovecenter").onmousedown = this.textHeightChange;
			document.getElementById("arighttouchmove").onmousedown = this.textaleft;
			document.getElementById("alefttouchmove").onmousedown = this.textaright;
			document.getElementById("downtouchmovewidthright").onmousedown = this.textdownright;
		},
		beforeDestroy() {
			clearInterval(this.timer)
		},
		methods: {
			refdrag(arr) {
				this.form.px = arr.px;
				this.form.py = arr.py;
				this.form.pw = arr.pw;
				this.form.ph = arr.ph;
			},
			clickdrag(e) {
				let dx = e.clientX; //当你第一次单击的时候，存储X轴的坐标。
				let dy = e.clientY;
				this.form.px = this.arr[this.gidx].px;
				this.form.py = this.arr[this.gidx].py;
				this.form.ph = this.arr[this.gidx].ph;
				this.form.pw = this.arr[this.gidx].pw;
			},
			textdownright(e) {
				let that = this
				let dx = e.clientX; //当你第一次单击的时候，存储X轴的坐标。
				let dy = e.clientY;
				//禁止选择网页上的文字
				document.onselectstart = function() {
					return false;
				};
				document.onmousemove = e => {
					if (e.clientX > that.innerWidth || e.clientY > that.innerHeight) {
						return
					}
					if (e.clientX < dx) {
						that.form.pw -= (dx - e.clientX)
						that.arr[that.gidx].pw = that.form.pw
						that.form.ph -= (dx - e.clientY)
						that.arr[that.gidx].ph = that.form.ph
					} else {
						that.form.pw += (e.clientX - dx)
						that.arr[that.gidx].pw = that.form.pw
						that.form.ph += (dx - e.clientY)
						that.arr[that.gidx].ph = that.form.ph
					}
					dx = e.clientX;
					dy = e.clientY;
				};
				//鼠标点击后，抬起才发生的事件；
				document.onmouseup = e => {
					document.onmousemove = null;
					document.onmouseup = null;
				};
				e.stopPropagation();
				e.preventDefault();
				return false;
			},
			//移动事件
			textROIChange(e) {
				let that = this
				let dx = e.clientX;
				let dy = e.clientY;
				//禁止选择网页上的文字
				document.onselectstart = function() {
					return false;
				};
				document.onmousemove = e => {
					let dfx = e.clientX - dx;
					let dfy = e.clientY - dy;
					that.form.px += dfx;
					that.form.py += dfy;
					that.arr[that.gidx].px = that.form.px;
					that.arr[that.gidx].py = that.form.py;
					dx = e.clientX;
					dy = e.clientY;
				};
				//鼠标点击后，抬起才发生的事件；
				document.onmouseup = e => {
					document.onmousemove = null;
					document.onmouseup = null;
				};
				e.stopPropagation();
				e.preventDefault();
				return false;
			},
			textaleft(e) {
				let that = this
				let dx = e.clientX; 
				let dy = e.clientY;
				//let dl= dx+that.form.pw;
				//let db= dy+that.form.ph;
				//禁止选择网页上的文字
				document.onselectstart = function() {
					return false;
				};
				document.onmousemove = e => {
					//console.log("IN")
					let dl= that.form.px+that.form.pw;
					
					that.form.px = e.clientX
					that.arr[that.gidx].px = that.form.px
					
					let am=dl-that.form.px;
					that.form.pw=am;
					that.arr[that.gidx].pw=am;
					dx = e.clientX;
				};
				//鼠标点击后，抬起才发生的事件；
				document.onmouseup = e => {
					document.onmousemove = null;
					document.onmouseup = null;
				};
				e.stopPropagation();
				e.preventDefault();
				return false;
			},
			textaright(e) {
				let that = this
				let dx = e.clientX; //当你第一次单击的时候，存储X轴的坐标。
				//禁止选择网页上的文字
				document.onselectstart = function() {
					return false;
				};
				document.onmousemove = e => {
					if (e.clientX > that.innerWidth) {
						return
					}
					if (e.clientX < dx) {
						that.form.pw -= (dx - e.clientX)
						that.arr[that.gidx].pw = that.form.pw
					} else {
						that.form.pw += (e.clientX - dx)
						that.arr[that.gidx].pw = that.form.pw
					}
					dx = e.clientX
				};
				//鼠标点击后，抬起才发生的事件；
				document.onmouseup = e => {
					document.onmousemove = null;
					document.onmouseup = null;
				};
				e.stopPropagation();
				e.preventDefault();
				return false;
			},
			textHeightChangeOn(e) {
				let that = this
				let dy = e.clientY; //当你第一次单击的时候，存储Y轴的坐标。
				//禁止选择网页上的文字
				document.onselectstart = function() {
					return false;
				}; 
				document.onmousemove = e => {
					let dh=this.form.py+that.form.ph;
					that.form.py=e.clientY
					that.arr[that.gidx].py=that.form.py
					
					let ah=dh-that.form.py;
					that.form.ph=ah;
					that.arr[that.gidx].ph=ah;
					dy = e.clientY
				};
				//鼠标点击后，抬起才发生的事件；
				document.onmouseup = e => {
					document.onmousemove = null;
					document.onmouseup = null;
				};
				e.stopPropagation();
				e.preventDefault();
				return false;
			},
			//设置高度 当鼠标向上向下拖动时触发该方法
			textHeightChange(e) {
				let that = this
				let dy = e.clientY; //当你第一次单击的时候，存储Y轴的坐标。
				//禁止选择网页上的文字
				document.onselectstart = function() {
					return false;
				}; 
				document.onmousemove = e => {
					if (e.clientY > that.innerHeight) {
						return
					}
					if (e.clientY < dy) {
						that.form.ph -= (dy - e.clientY)
						that.arr[that.gidx].ph = that.form.ph

					} else {
						that.form.ph += (e.clientY - dy)
						that.arr[that.gidx].ph = that.form.ph
					}
					dy = e.clientY
				};
				//鼠标点击后，抬起才发生的事件；
				document.onmouseup = e => {
					document.onmousemove = null;
					document.onmouseup = null;
				};
				e.stopPropagation();
				e.preventDefault();
				return false;
			}

		},

	}
</script>
<style scoped>
	.box {
		position: relative;
		top: 0px;
		left: 0px;
		width: 200px;
		height: 200px;
		/* background: red; */
		border: 2px dashed #000000;
		border-width: 3px;
		cursor: move;
	}

	.onright {
		position: absolute;
		left: 95px;
		top: -10px;
		width: 10px;
		height: 10px;
		border: 3px #a72525 solid;
		border-radius: 50%;
		cursor: ne-resize;
	}

	.oncenter {
		position: absolute;
		left: 45px;
		top: -10px;
		width: 10px;
		height: 10px;
		border: 3px #a72525 solid;
		border-radius: 50%;
		cursor: n-resize;
	}

	.onleft {
		position: absolute;
		left: -9px;
		top: -10px;
		width: 10px;
		height: 10px;
		border: 3px #a72525 solid;
		border-radius: 50%;
		cursor: nw-resize;
	}

	.downleft {
		position: absolute;
		left: -9px;
		bottom: -9px;
		width: 10px;
		height: 10px;
		border: 3px #a72525 solid;
		border-radius: 50%;
		cursor: s-resize;
	}

	.downcenter {
		position: absolute;
		left: 45px;
		bottom: -9px;
		width: 10px;
		height: 10px;
		border: 3px #a72525 solid;
		border-radius: 50%;
		cursor: s-resize;
	}

	.downright {
		position: absolute;
		bottom: -9px;
		width: 10px;
		height: 10px;
		border: 3px #a72525 solid;
		border-radius: 50%;
		cursor: se-resize;
	}

	.aright {
		position: absolute;
		left: -9px;
		width: 10px;
		height: 10px;
		border: 3px #a72525 solid;
		border-radius: 50%;
		cursor: w-resize;
	}

	.aleft {
		position: absolute;
		left: -9px;
		width: 10px;
		height: 10px;
		border: 3px #a72525 solid;
		border-radius: 50%;
		cursor: e-resize;
	}
</style>