Vue+js+css实现绘制div并进行拖动选区、移动、改变大小

需求：就是可以实现拖动一个方框，扔在一个图片上面，就可以在该图片上面绘制出新的div选区，可以对绘制的div进行移动、改变大小

html：拖动选区的方框
<div draggable="true" id="source" class="drag"></div>
<div id="big_Img" draggable="true">
    <img :style="imgHW" :src="fileUrl">
</div>

mounted() {
			//拖拽元素绘制div
			source.ondragend = function(ev) {
				this.aaaa(ev) //div绘制、移动、改变大小
			}

 

 

js：绘制新的div
            aaaa(ev){
                var oBox = document.getElementById("big_Img");
				ev = window.event || ev;
				var move_x1, move_y1, move_x2, move_y2, move_x3, move_y3, move_x4, move_y4;
				var isMove = false;
				var angle_x;
				var x1 = ev.clientX - 130 - oBox.offsetLeft; //起始坐标,130是左边导航的宽度
				var y1 = ev.clientY - 30 - oBox.offsetTop;
				var x2 = x1 + 100;
				var y2 = y1;
				var x4 = x1;
				var y4 = y1 + 100;
				var x3 = ev.clientX - 80 - oBox.offsetLeft + 50; //终点坐标
				var y3 = ev.clientY + 20 - oBox.offsetTop + 50;
				var degree = 0;
				var oDiv = document.createElement("div");
				var otext = document.createElement("div1");
				oBox.appendChild(otext);
				oBox.appendChild(oDiv);
				otext.style.left = x1 - 15 + "px"; //在绘制的大div左上角的位置
				otext.style.top = y1 - 15 + "px"; 
//15是要减去小div的大小，这样位置才会在div的外面
				this.tag_number++;
				otext.id = this.tag_number;
				otext.innerText = this.tag_number; 
//在绘制的div1中加上文本,这里是加上左上角的编号
				oDiv.style.left = (x3 > x1 ? x1 : x3) + "px"; //绘制oDiv的样式
				oDiv.style.top = (y3 > y1 ? y1 : y3) + "px";
				oDiv.style.width = Math.abs(x3 - x1) + "px";
				oDiv.style.height = Math.abs(y3 - y1) + "px";
				oDiv.id = this.tag_number
                oDiv.onmousedown = function(ev) {
                    var down_x1 = ev.clientX; //获取鼠标按下的坐标
					var down_y1 = ev.clientY;
					//获取元素的left，top值
					var l = oDiv.offsetLeft;
					var t = oDiv.offsetTop;
                    if(ev.offsetX < oDiv.clientWidth - 10 && ev.offsetY < oDiv.clientHeight - 10) {  //判断是点击的右下角改变大小还是移动div
						that.mobileDiv = true   //移动div
					} else {
						that.mobileDiv = false   //改变大小
					}
                    document.onmousemove = function(ev) {   //鼠标移动事件
                        var ev = ev || event;
						//获取鼠标移动时的坐标
						var down_x2 = ev.clientX;
						var down_y2 = ev.clientY;
						//计算出鼠标的移动距离
						that.move_x = down_x2 - down_x1;
						that.move_y = down_y2 - down_y1;
                        //移动的数值与元素的left，top相加，得出元素的移动的距离
						that.lt = that.move_y + t;
						that.ls = that.move_x + l;
                        if(that.mobileDiv == true) { //移动div
							//更改元素的left，top值
							oDiv.style.top = that.lt + 'px';
							oDiv.style.left = that.ls + 'px';
						}else{
 //改变div大小开始
							//获取鼠标移动时的坐标
							var down_x2 = ev.clientX;
							var down_y2 = ev.clientY;
						}
                    }
                    document.onmouseup = function(ev) {  //鼠标抬起
                         document.onmousemove = null;
                         if(that.mobileDiv == true){
                            otext.style.top = that.lt - 15 + 'px'; //随着大div的移动而移动
							otext.style.left = that.ls - 15 + 'px';
                         }else{
                            //改变大小的鼠标抬起
                         }
                    }    
                }
}

 

css:新绘制的div样式等等
	
    #big_Img {
		position: relative;
		/*使大图随着小图移动的定位*/
		z-index: 2;
	}
	
	#big_Img div {
		border: 2px rgba(255, 27, 27, 0.76) dashed;
		position: absolute;
		cursor: move;
		resize: both;
		/*使绘制的div可以拖动改变大小的样式 */
		overflow: auto;
		z-index: 999;
	}
    #big_Img div1 {
		border: 1px rgba(0, 0, 0, 0.76) solid;
		position: absolute;
		text-align: center;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		z-index: 999;
	}
	.drag {
		border: 1px #5da8ff solid;
		width: 50px;
		height: 24px;
		background: #fff;
		cursor: pointer;
		margin: auto
	}
	
	.drag:active {
		box-shadow: 3px 3px 10px 0 #111111;
		width: 51px;
		height: 25px;
	}