鼠标拖曳的效果

*{ margin:0; padding:0;}
#dragDiv{ width:200px; height:200px; position:absolute; top:100px; left:100px; background:#ddd;}

var dragDiv=document.getElementById('dragDiv'); //鼠标按下动作 dragDiv.onmousedown=function(event){ var e=event||window.event, t=e.target||e.srcElement, //鼠标按下时的坐标x1,y1 x1=e.clientX, y1=e.clientY, //鼠标按下时的左右偏移量 dragLeft=this.offsetLeft, dragTop=this.offsetTop; document.onmousemove=function(event){ var e=event||window.event, t=e.target||e.srcElement, //鼠标移动时的动态坐标 x2=e.clientX, y2=e.clientY, //鼠标移动时的坐标的变化量 x=x2-x1, y=y2-y1; dragDiv.style.left=(dragLeft+x)+'px'; dragDiv.style.top=(dragTop+y)+'px'; } document.onmouseup=function(){ this.onmousemove=null; } }

鼠标拖曳的效果，ps:下面的代码在火狐下是有bug的，这是因为拖拽元素的innerHTML是空的，解决办法可以加空的标签或让其里面有内容即可，有兴趣可  以试一下

转载于:https://my.oschina.net/u/1162572/blog/293662