事件委托版拖拽

  这个算是对上一个元素拖拽及原理案例的变性，这个是相同的作用，只不过通过target来实现。也是对上一个项目的优化。事件委托版。

/* CSS样式代码 */
/* 清除浏览器的基本样式 */
* {
	margin: 0;
	padding: 0;
}
/* 给元素一些基础属性 */
.drag{
	width: 100px;
	height: 100px;
	background: red;
	position: absolute;
	left: 0;
	top: 0;
}

//定义一些带有class属性的盒子元素
<div class='drag'></div>
<div class='drag'></div>
<div class='drag'></div>
<div class='drag'></div>
<div class='drag'></div>

//定义一个鼠标点击的函数
document.documentElement.onmousedown = function (e) {
	//解决低级火狐的问题（传参的方法）
	var ev = e || event;
	//解决兼容性问题
	var iTarge = ev.target || ev.srcElement;
	//if判断
	if (iTarge.className == 'drag') {
	iTarge.style.background = 'red';
		//设置背景颜色
		iTarge.style.background = 'red';
		//获取事件发生位置距离元素左边的距离
		var l = ev.clientX - iTarge.offsetLeft;
		//获取事件发生位置距离元素顶部的距离
		var t = ev.clientY - iTarge.offsetTop;
		//定义鼠标移动的函数
		document.onmousemove = function (e) {
			//解决兼容性问题
			var ev = e || event;
			//获取事件发生位置到元素左侧的距离
			iTarge.style.left = ev.clientX - l + 'px';
			//获取事件发生位置到元素顶部的距离
			iTarge.style.top = ev.clientY - t + 'px';
			/* 方法二
			不用var ev
			iTarge.style.left = event.clientX - l + 'px';
			iTarge.style.top = event.clientY - t + 'px';
			*/
		};
		//定义一个松开鼠标的函数
		document.onmouseup = function () {
			//定义背景颜色
			iTarge.style.background = 'red';
			//清空onmousemove 和 onmouseup
			this.onmousemove = this.onmouseup = null;
		};
	}
	//返回
	return false;
};

  这个没有做溢出处理，具体方法可以参考上一个。