JavaScript实现页面元素拖放操作

• 定义拖放元素为绝对定位，以及设计事件的响应过程
• 清楚几个左边概念：按下鼠标时的指针坐标，移动中当前鼠标的指针坐标，松开鼠标时的指针坐标，拖放元素的原始坐标，拖动中的元素坐标
• 算法设计：按下鼠标时，获取被拖放元素和鼠标指针的位置，在移动中实现计算鼠标偏移的距离，并利用该偏移距离加上被拖放元素的原坐标位置，获得拖放元素的实时坐标

<div id="box"></div>
<script type="text/javascript">
	//初始化拖放对象
	var box = document.getElementById("box");
	//定义初始样式
	box.style.position = "absolute"; //设置position属性不然无法移动
	box.style.width = "160px";
	box.style.height = "120px";
	box.style.backgroundColor = "red";

	//初始化变量，标准化事件
	var mx, my, ox, oy; //前者是鼠标位置，后者是拖动对象位置
	function e(e) {
		if (!e) { //兼容ie
			e = window.event
			e.target = e.srcElement
			e.layerX = e.offsetX
			e.layerY = e.offsetY
		}
		//计算鼠标指针的x轴距离与y轴距离
		e.mx = e.pageX || e.clientX + document.body.scrollLeft
		e.my = e.pageY || e.clientY + document.body.scrollTop
		return e
	}
	//定义鼠标事件处理函数
	document.onmousedown = function(event) { //鼠标按下时，初始化处理，事件绑定在文档对象上
		event = e(event) //获取标准事件对象    ？不懂
		o = event.target //获取当前拖动的元素
		ox = parseInt(o.offsetLeft)
		ox = parseInt(o.offsetTop)
		mx = event.mx
		my = event.my
		document.onmousemove = move
		document.onmouseup = stop
	}
	//鼠标移动处理函数
	function move(event) {
		event = e(event)
		o.style.left = ox + event.mx - mx + "px"
		o.style.top = oy + event.my - my + "px"
	}
	//松开鼠标处理函数
	function stop(event) {
		event = e(event)
		ox = parseInt(o.offsetLeft) //记录鼠标拖放元素x坐标
		oy = parseInt(o.offsetTop)
		mx = event.mx //记录鼠标指针的x坐标
		my = event.my
		o = document.onmousemove = document.onmouseup = null; //释放所有操作对象
	}
</script>