1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5. <title>draggable</title> 
  6. <style type="text/css"> 
  7. .ui-draggable{ 
  8.     position: absolute; 
  9.     cursor: move; 
  10. } 
  11. .ui-draggable-opacity{ 
  12.     filter:alpha(opacity =50); 
  13.     -moz-opacity:0.5 ; 
  14.     -khtml-opacity: 0.5; 
  15.     opacity: 0.5; 
  16. } 
  17. </style> 
  18. </head> 
  19. <body> 
  20. <div id='demo' style='width:200px;height:100px;background: #ccc;'> 
  21.     drag me! 
  22. </div> 
  23. <script type="text/javascript" src='http://code.jquery.com/jquery-latest.min.js'></script> 
  24. <script type="text/javascript"> 
  25. /** 
  26.  * jquery 实现拖动 
  27.  * @author huxiaoqi 
  28.  */ 
  29. (function($){ 
  30.     $.fn.draggable = function(){ 
  31.         var self = $(this); 
  32.         self.addClass('ui-draggable'); 
  33.         var width = self.width(); 
  34.         var height = self.height(); 
  35.         var position = self.position(); 
  36.         var pos = { 
  37.                     mouseX:0, 
  38.                     mouseY:0, 
  39.                     offsetX:0, 
  40.                     offsetY:0 
  41.                   }; 
  42.  
  43.         self.bind({'mousedown':function(e){ 
  44.                 self.addClass('ui-draggable-opacity'); 
  45.                 position = self.position(); 
  46.                 pos.offsetX = e.pageX - position.left; 
  47.                 pos.offsetY = e.pageY - position.top; 
  48.             //记录鼠标位置和目标位置的相对位置 
  49.                 $(document).bind('mousemove',function(e){ 
  50.                     position = self.position(); 
  51.                     pos.mouseX = e.pageX; 
  52.                     pos.mouseY = e.pageY; 
  53.                     self.moveTo(pos.mouseX - pos.offsetX , pos.mouseY - pos.offsetY); 
  54.                 }); 
  55.             }, 
  56.             'mouseup':function(e){ 
  57.                 $(document).unbind('mousemove'); 
  58.                 self.removeClass('ui-draggable-opacity'); 
  59.             } 
  60.         }); 
  61.         self.moveTo = function(x,y){ 
  62.             self.css({'left':x,'top':y}); 
  63.             return self; 
  64.         }; 
  65.     }; 
  66. })(jQuery); 
  67. $('#demo').draggable(); 
  68. </script> 
  69. </body> 
  70. </html>