jQuery拖动层_jquer 层拖动-CSDN博客

本文链接：https://blog.csdn.net/staunch_ke/article/details/82016230

<!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" />
<script src="http://blog.163.com/kefan_1987/blog/jquery-1.4.4.min.js" language="javascript"></script>
<title>无标题文档</title>
</head>

<body>

   <div id="a" style="width:300px; height:300px; background-color:#069; position:absolute;">按下鼠标即可拖动</div>
    <div id="b"></div>
</body>

<script language="javascript">
   $(function(){

       //alert('aaaaaaa');

       var x;
       var y;
       var top;
       var left;
       var clix;
       var cliy;
       var pd;

       var fx;
       var fy;

       $("#a").mousedown(function(f){
           pd=true;


               if(!f){

                       f=window.event;
                   }
               fx=f.clientX;
               fy=f.clientY;
               top=$(this).offset().top;
               left=$(this).offset().left;
       });
       $("#a").mousemove(function(e){

               if(!e){

                       e=window.event;
                   }

                       clix=e.clientX;
                       cliy=e.clientY;

               if(pd==true){

                       $(this).css({'top':top+(cliy-fy),'left':left+(clix-fx)});
                   }



               $("#b").text(e.clientX+'   '+e.clientY);
           });


       $("#a").mouseup(function(){

              pd=false;
           });

       })
</script>
</html>