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;
	}