【js拖拽函数，定时器升级版】

功能

使用bindDrag函数让元素可以拖拽

代码

<style>
			#box {
				position: fixed;
				left: 0;
				top: 0;
				width: 200px;
				height: 200px;
				background-color: aqua;
			}
		</style>
	</head>
	<div id="box"></div>

	<script>
		var $style = function(obj, styleName) { //Js获取样式【交持内联】
			var realStyle = null;
			if (obj.currentStyle) {
				realStyle = obj.currentStyle[styleName]
			} else if (window.getComputedStyle) {
				realStyle = window.getComputedStyle(obj, null)[styleName]
			}
			return realStyle;
		}
		//var dom = document.getElementById('test');
		var bindDrag = function(dom) {//绑定拖拽方法
			if (!dom) return false;
			if (!dom.style.position && !$style(dom, 'position')) {
				console.log('未设置dom元素定位(style.position)不可拖拽！');
				return false;
			}
			var initX, initY, //初始坐标，鼠标相对元素的坐标
				timer, //定时器
				refreshRate = 250; //刷新率250
			var mx, my; //当前鼠标坐标
			dom.onmousedown = function(event) {
				var p = getElPosition(dom); //获取dom初始坐标
				//dom.setAttribute();
				dom.initX = event.clientX - p.x;
				dom.initY = event.clientY - p.y;
				//console.log(initX,initY,event.clientX,event.clientY);
				timer = setInterval(function() {
					checkMove(event, dom);
				}, 1000 / refreshRate);
			}
			dom.onmousemove = function(event) { //刷新鼠标当前坐标
				dom.mx = event.clientX;
				dom.my = event.clientY;
			}
			dom.onmouseup = function() { //移除定时器
				clearInterval(timer);
			}
			dom.onmouseout = function() { //移除定时器
				clearInterval(timer);
			}
		}


		var checkMove = function(event, dom) { //刷新元素显示
			// 移动事件
			// mx// 当前鼠标距离屏幕X的距离
			//my // 当前鼠标距离屏幕Y的距离

			// 获取页面宽高
			var bodyW = document.documentElement.clientWidth;
			var bodyH = document.documentElement.clientHeight;
			// 获取盒子宽高

			var boxH = dom.offsetHeight;
			var boxW = dom.offsetWidth;
			//可移动距离
			var avX = -dom.initX + dom.mx,
				avY = -dom.initY + dom.my;
			//console.log(bodyH,bodyW)
			console.log(666, event.clientX, event.clientY)
			if (avX < 0) avX = 0;
			if (avY < 0) avY = 0;
			if (boxW - dom.initX + dom.mx > bodyW) avX = bodyW - boxW;
			if (boxH - dom.initY + dom.my > bodyH) avY = bodyH - boxH;
			//修改元素坐标
			console.log(avX, avY);
			dom.style.left = avX + 'px';
			dom.style.top = avY + 'px';
			//console.log(avX,avY,mx,my)
		};
		var getElPosition = function(el) { //获取元素绝对坐标,el为元素
			var t = el.offsetTop,
				l = el.offsetLeft;
			while (el = el.offsetParent) {
				t += el.offsetTop;
				l += el.offsetLeft;
			}
			return {
				x: l,
				y: t
			};
		};
		window.onload = function() {
		    //box元素绑定方法
			bindDrag(document.getElementById('box'));
		}
	</script>