JQuery 实现简单拖拽原理 话不多说直接上代码 <!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=gb2312" /> <title>无标题文档</title> <mce:script src="jquery-1.4.2.min.js" mce_src="jquery-1.4.2.min.js" type="text/javascript"></mce:script> <mce:style type="text/css"><!-- .drag { position:absolute; left:327px; top:42px; width:290px; height:175px; z-index:10; background: #ff0000; cursor:move; } body { margin-top: 0px; } --></mce:style><style type="text/css" mce_bogus="1">.drag { position:absolute; left:327px; top:42px; width:290px; height:175px; z-index:10; background: #ff0000; cursor:move; } body { margin-top: 0px; }</style> <mce:script type="text/javascript"><!-- $(function() { var _move=false; var _x,_y; $(".drag").mousedown(function(e) { _move=true; _x=e.pageX-parseInt($(".drag").css("left")); _y=e.pageY-parseInt($(".drag").css("top")); $(".drag").fadeTo(20, 0.5); }); $(document).mousemove(function(e){ if(_move) { var x=e.pageX-_x; var y=e.pageY-_y; $(".drag").css({top:y,left:x}); } }).mouseup(function(){ _move=false; $(".drag").fadeTo("fast", 1); }); }); // --></mce:script> </head> <body> <div class="drag"></div> <div style="height:700px; width:100% ; background:#999999"></div> </body> </html> 代码很简单 要是你还不会我也没有办法了