jQuery实现DIV拖拽

最新推荐文章于 2024-05-09 10:41:45 发布

zsgit

最新推荐文章于 2024-05-09 10:41:45 发布

阅读量900

点赞数

分类专栏： JQuery 文章标签： jquery function server border div class

本文链接：https://blog.csdn.net/zsgit/article/details/6191772

版权

JQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

 <html xmlns="http://www.w3.org/1999/xhtml"> 
  
 <head runat="server"> 
  
     <title></title>  
  
     <script src="htgl/js/jquery-1.3.2.min.js" type="text/javascript"></script> 
  
     <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); //松开鼠标后停止移动并恢复成不透明 
  
             }); 
  
         }); 
  
     </script> 
  
     <style> 
  
         .drag 
  
         { 
  
             border: 2px solid #000;  
  
             width: 100px; 
  
             height: 100px; 
  
             cursor: move; 
  
             position: absolute; 
  
             left: 0; 
  
             top: 0; 
  
         } 
  
     </style> 
  
 </head> 
  
 <body> 
  
     <form id="form1" runat="server"> 
  
     <div class="drag">div拖拽 
  
     </div>  
  
     </form> 
  
 </body> 
  
 </html>