本文实例讲述了jQuery实现的简单拖拽功能。分享给大家供大家参考，具体如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽</title> <style> *{ padding: 0; margin: 0; } div{ width: 100px; height: 100px; background: #f00; cursor: pointer; position: absolute; left: 0; top: 0; } </style> </head> <body> <div></div> <script src="jquery.js"></script> <script> $(function(){ //移动窗口的步骤 //1、按下鼠标左键 //2、移动鼠标 $('div').mousedown(function(e){ // e.pageX var positionDiv = $(this).offset(); var distenceX = e.pageX - positionDiv.left; var distenceY = e.pageY - positionDiv.top; //alert(distenceX) // alert(positionDiv.left); $(document).mousemove(function(e){ var x = e.pageX - distenceX; var y = e.pageY - distenceY; if(x<0){ x=0; }else if(x>$(document).width()-$('div').outerWidth(true)){ x = $(document).width()-$('div').outerWidth(true); } if(y<0){ y=0; }else if(y>$(document).height()-$('div').outerHeight(true)){ y = $(document).height()-$('div').outerHeight(true); } $('div').css({ 'left':x+'px', 'top':y+'px' }); }); $(document).mouseup(function(){ $(document).off('mousemove'); }); }); }); </script> </body> </html>
效果图如下：
希望本文所述对大家jQuery程序设计有所帮助。