使用javascript实现鼠标拖动画矩形框以及实现固定区域内随意拖动

遇到一个项目的功能改造，由于这个项目之前一直使用OCX插件，所以只能使用IE浏览器，现在新的需求是适配大部分浏览器，所以第一时间想到使用JavaScript实现，最后功能也确实实现了，虽然有点小瑕疵，话不多说，直接上代码

// css部分
#canvas {
		background-color: #AAAAAA;
		position: relative;
		background-size:100% 100%;
		border: 2px solid blue;
	}

#canvas>div {
		border: 2px solid green;
		position: absolute;
		background-color: #eaeaea;
	}
#canvas>div>span {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-family: simsun;
		font-size: 9pt;
	}


// html部分
<div id="canvas" style="width:850px;height:477px"></div>

// js部分
var canvasWidth= 850;
var canvasHeight = 477;
var allDivNum = 1;
CanvasExt = {
		drawRect: function(canvas) {//参数canvas--所画素材框的区域
			var that = this;

			// canvas 的矩形框
			var canvasRect = canvas.getBoundingClientRect();
			// 矩形框的左上角坐标
			var canvasLeft &#