js拖拽element的弹框

function dragDialog (dialogHeader,elDialog) {
	// 获取拖拽内容头部
	const dialogHeaderEl = document.querySelectorAll(dialogHeader);
	const dragDom = document.querySelectorAll(elDialog);
	var _move =false;
	if(dialogHeaderEl.length>1){
		// 获取拖拽内容整体 这个rrc-dialog是我自己封装的组件 如果使用element的组件应写成.el-dialog
		for(var i=0;i<dialogHeaderEl.length;i++){
			(function(i){
				dialogHeaderEl[i].style.cursor = 'move';
				dialogHeaderEl[i].onmousedown = function(e) {
					var e = e || window.e;  //兼容IE浏览器
					_move=true;
					if(_move){

						// 鼠标按下，计算当前元素距离可视区的距离
						const disX = e.clientX - dialogHeaderEl[i].offsetLeft;
						const disY = e.clientY - dialogHeaderEl[i].offsetTop;
						
						//设置捕获范围
						if(dialogHeaderEl[i].setCapture){
							dialogHeaderEl[i].setCapture();
						}else if(window.captureEvents){
							window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
						}
						document.onmousemove = function (e) {

							var e = e || window.e;  //兼容IE浏览器
							// 通过事件委托，计算移动的距离 （开始拖拽至结束拖拽的距离）
							const moveX = e.clientX - disX;
							const moveY = e.clientY - disY;

							let finallyL = moveX ;
							let finallyT = moveY ;

							// 边界值判定 注意clientWidth scrollWidth区别 要减去之前的top left值
							// dragDom.offsetParent表示弹窗阴影部分
							if (finallyL < 0) {
								finallyL = 0
							} else if (finallyL > dragDom[i].offsetParent.clientWidth - dragDom[i].clientWidth - dragDom[i].offsetParent.offsetLeft) {
								finallyL = dragDom[i].offsetParent.clientWidth - dragDom[i].clientWidth - dragDom[i].offsetParent.offsetLeft
							}

							if (finallyT < 0) {
								finallyT = 0
							} else if (finallyT > dragDom[i].offsetParent.clientHeight - dragDom[i].clientHeight - dragDom[i].offsetParent.offsetLeft) (
								finallyT = dragDom[i].offsetParent.clientHeight - dragDom[i].clientHeight - dragDom[i].offsetParent.offsetLeft
							)
							dragDom[i].style.left = finallyL + 'px';
							dragDom[i].style.top = finallyT + 'px'

						};
					}
					document.onmouseup = function (e) {
						_move=false;
						//取消捕获范围
						if(dialogHeaderEl[i].releaseCapture){
							dialogHeaderEl[i].releaseCapture();
						}else if(window.captureEvents){
							window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
						}
						document.onmousemove = null;
						document.onmouseup = null;
					};
				}
			})(i)
		}
	}else{
		dialogHeaderEl.style.cursor = 'move';
		dialogHeaderEl.onmousedown = function(e) {
			_move = true;
			if (_move) {
				// 鼠标按下，计算当前元素距离可视区的距离
				const disX = e.clientX - dialogHeaderEl.offsetLeft;
				const disY = e.clientY - dialogHeaderEl.offsetTop;
				const screenWidth = document.body.clientWidth; // body当前宽度
				const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度，可某些环境下无法获取)

				const dragDomWidth = dragDom.offsetWidth; // 对话框宽度
				const dragDomheight = dragDom.offsetHeight; // 对话框高度

				const minDragDomLeft = dragDom.offsetLeft;
				const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;

				const minDragDomTop = dragDom.offsetTop;
				const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
				// 获取到的值带px 正则匹配替换
				// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
				const sty = (function () {
					if (window.document.currentStyle) {
						return (dom, attr) => dom.currentStyle[attr];
					} else {
						return (dom, attr) => getComputedStyle(dom, false)[attr];
					}
				})();
				// 获取到的值带px 正则匹配替换
				let styL = sty(dragDom, "left");
				let styT = sty(dragDom, "top");

				// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
				if (styL.includes("%")) {
					styL = +document.body.clientWidth * (+styL.replace(/\%/g, "") / 100);
					styT = +document.body.clientHeight * (+styT.replace(/\%/g, "") / 100);
				} else {
					styL = +styL.replace("px", "");
					styT = +styT.replace("px", "");
				}
			}
			//设置捕获范围
			if(dialogHeaderEl.setCapture){
				dialogHeaderEl.setCapture();
			}else if(window.captureEvents){
				window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
			}
			document.onmousemove = function (e) {
				// 通过事件委托，计算移动的距离 （开始拖拽至结束拖拽的距离）
				const moveX = e.clientX - disX;
				const moveY = e.clientY - disY;
				dragDom.style.left = moveX + 'px';
				dragDom.style.top = moveY + 'px'
			};
		}
		document.onmouseup = function (e) {
			_move=false;
			if(dialogHeaderEl.releaseCapture){
				dialogHeaderEl.releaseCapture();
			}else if(window.captureEvents){
				window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
			}
			document.onmousemove = null;
			document.onmouseup = null;
		};


	}

}

使用方式如下：

 dragDialog('.el-dialog__header','.el-dialog');

性能是有点不好，看大神帮忙优化

2020年8月10日 更新修复bug

function dragDialog (dialogHeader,elDialog) {
	// 获取拖拽内容头部
	const dialogHeaderEl = document.querySelectorAll(dialogHeader);
	const dragDom = document.querySelectorAll(elDialog);
	var _move =false;
		// 获取拖拽内容整体 这个rrc-dialog是我自己封装的组件 如果使用element的组件应写成.el-dialog
		for(var i=0;i<dialogHeaderEl.length;i++){
			(function(i){
				dialogHeaderEl[i].style.cursor = 'move';
				dialogHeaderEl[i].onmousedown = function(e) {
					var e = e || window.e;  //兼容IE浏览器
					_move=true;
					if(_move){

						// 鼠标按下，计算当前元素距离可视区的距离
						const disX = e.clientX - dragDom[i].offsetLeft;
						const disY = e.clientY - dragDom[i].offsetTop;
						/* console.log("e.clientX,e.clientY----"+e.clientX,e.clientY);
						console.log("dialogHeaderEl[i].offset----"+dragDom[i].offsetLeft,dragDom[i].offsetTop);
						console.log("disX,disY---------"+disX,disY) */
						//设置捕获范围
						if(dialogHeaderEl[i].setCapture){
							dialogHeaderEl[i].setCapture();
						}else if(window.captureEvents){
							window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
						}
						document.onmousemove = function (e) {
							console.log(e)
							var e = e || window.e;  //兼容IE浏览器
							// 通过事件委托，计算移动的距离 （开始拖拽至结束拖拽的距离）
							const moveX = e.clientX - disX;
							const moveY = e.clientY - disY;

							let finallyL = moveX ;
							let finallyT = moveY ;

							// 边界值判定 注意clientWidth scrollWidth区别 要减去之前的top left值
							// dragDom.offsetParent表示弹窗阴影部分
							if (finallyL < 0) {
								finallyL = 0
							} else if (finallyL > dragDom[i].offsetParent.clientWidth - dragDom[i].clientWidth - dragDom[i].offsetParent.offsetLeft) {
								finallyL = dragDom[i].offsetParent.clientWidth - dragDom[i].clientWidth - dragDom[i].offsetParent.offsetLeft
							}

							if (finallyT < 0) {
								finallyT = 0
							} else if (finallyT > dragDom[i].offsetParent.clientHeight - dragDom[i].clientHeight - dragDom[i].offsetParent.offsetLeft) (
								finallyT = dragDom[i].offsetParent.clientHeight - dragDom[i].clientHeight - dragDom[i].offsetParent.offsetLeft
							)
							dragDom[i].style.left = finallyL + 'px';
							dragDom[i].style.top = finallyT + 'px'

						};
					}
					document.onmouseup = function (e) {
						_move=false;
						//取消捕获范围
						if(dialogHeaderEl[i].releaseCapture){
							dialogHeaderEl[i].releaseCapture();
						}else if(window.captureEvents){
							window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
						}
						document.onmousemove = null;
						document.onmouseup = null;
					};
				}
			})(i)
		}
}