<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <mce:script type="text/javascript" src="jquery-1.4.4.min.js" mce_src="jquery-1.4.4.min.js"></mce:script> <mce:script type="text/javascript"><!-- var b=false; var x; var y; //得到事件点和div的距离x,y function myDown(temp){ b = true ; //x,y坐标是点击事件点和外该组件的距离差 x=event.x-$(temp).offset().left; y=event.y-$(temp).offset().top; } //只要移动事件触发就改变坐标 function myMove(temp){ //只要不释放鼠标就可以拖动div if(b){ var divleft=event.x-x; var divtop=event.y-y; //设置拖动左,上位置 $(temp).css("left",divleft); $(temp).css("top",divtop); } } // --></mce:script> <mce:style type="text/css"><!-- #demo{ width:400px; height:400px; background-color:#CCC; position:absolute; cursor:move; } --></mce:style><style type="text/css" mce_bogus="1"> #demo{ width:400px; height:400px; background-color:#CCC; position:absolute; cursor:move; }</style> </head> <body id="body"> <div id="demo" οnmοusedοwn="myDown(this)" οnmοusemοve="myMove(this)" onMouseUp="b = false ;"></div> </body> </html>