js拖动

html：

<div class="box" id="box">
	<p id="p">点击拖动</p>
	<a href="javascript:" id="hf">路径回放</a>
 </div>

js：

       /*
	   鼠标按下：（onmousedown）
	   鼠标移动onmousemove
           鼠标弹起：onmouseup
	*/
	//第一步：获取所要操作的节点对象（box、p、hf）
	window.onload = function(){
		var box = document.getElementById("box");  //box
		var p = document.getElementById("p");  //p
		var hf = document.getElementById("hf");  //hf
		var arr = [];
		p.onmousedown = function(e){
			var _event = window.event||e;
			//第一次在点击时，获取的当前鼠标相对于p的一个坐标
			var left = _event.offsetX;   
			var top = _event.offsetY;
			document.onmousemove = function(e){
				var _event = window.event||e;
				var x = _event.clientX-left;
				var y = _event.clientY-top;
				//{left:x,top:y}  {key:value}
				arr.push({left:x,top:y});
				box.style.left = x + "px";
				box.style.top = y + "px";
				
			}
			p.onmouseup = function(){
				document.onmousemove = null;
			}
			hf.onclick = function(){
				var termId = setInterval(function(){
					if(!arr[0]){
						clearInterval(termId);
						return;
					}
					box.style.left = arr[0].left + "px";
					box.style.top = arr[0].top + "px";
					arr.shift();
				},100);
			}
		}
	}

样式根据自己喜好就随意设置吧。这里可以实现点击拖动，同时还添加了路径回放的功能，主要思想就是一直将x和y的值存进一个数组，这个过程是持续的，然后点击回放的时候，使用一个定时器，把数组的第一个值依次删除，然后可以复原拖动的路径，如果是想倒放，那么就是删除数组里面的最后一个元素。