jQuery 学习笔记3 点击弹出一个div并允许拖拽移动

2023-08-29 09:34:22

这里我看了下http://qings.blog.51cto.com/4857138/998878/ 的文章，感谢他的分享。

首先我们有一个a标签和一个div，div默认是不显示的，当用户点击时改为显示。

 <!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" xml:lang="en">

 <head>

     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

     <title>drag</title>

     <style type="text/css">

         *{margin: 0;padding: 0;}

         #box{border: 5px solid #2e2e2e;width:320px;height: 240px;background-color: #CC9900;

             -moz-border-radius: 15px;      /* Gecko browsers */

             -webkit-border-radius: 15px;   /* Webkit browsers */

                border-radius:15px;            /* W3C syntax */

            }

         #hd{background-color: #666666;font-size: 14px;padding: 4px;}

         span{float: right;padding-right: 4px;}

         #cnt{padding: 5px;}

     </style>

 </head>

 <body>

     <div id="btn">

         <a href="#">点我弹框</a>

     </div>

     <div id="box">

         <div id="hd">

             <span>关闭</span><h3>这里是标题</h3>

         </div>

         <div id="cnt">

             这里是一些文字

         </div>

     </div>

 </body>

 </html>

首先做点css，效果如下

然后隐藏div，添加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" xml:lang="en">

 <head>

     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

     <title>drag</title>

     <script src="./js/jquery-1.9.1.min.js"></script>

     <script>

         $(document).ready(function() {

             // alert(111);

             $('#btn a').click(function() {

                 // alert(222);

                 $('#box').show();

             });

         });

     </script>

     <style type="text/css">

         *{margin: 0;padding: 0;}

         #box{border: 5px solid #2e2e2e;width:320px;height: 240px;background-color: #CC9900;

             -moz-border-radius: 15px;      /* Gecko browsers */

             -webkit-border-radius: 15px;   /* Webkit browsers */

                border-radius:15px;            /* W3C syntax */

                display: none;

                margin-left: 30px;

                margin-top: 20px;

            }

         #hd{background-color: #666666;font-size: 14px;padding: 4px;}

         span{float: right;padding-right: 4px;}

         #cnt{padding: 5px;}

     </style>

 </head>

 <body>

     <div id="btn">

         <a href="#">点我弹框</a>

     </div>

     <div id="box">

         <div id="hd">

             <span>关闭</span><h3>这里是标题</h3>

         </div>

         <div id="cnt">

             这里是一些文字

         </div>

     </div>

 </body>

 </html>

到此，点击显示就完成了。下面来完成关闭。给关闭span添加了一个鼠标手形的样式。

 <!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" xml:lang="en">

 <head>

     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

     <title>drag</title>

     <script src="./js/jquery-1.9.1.min.js"></script>

     <script>

         $(document).ready(function() {

             // alert(111);

             $('#btn a').click(function() {

                 // alert(222);

                 $('#box').show();

             });

             $('span').click(function() {

                 // alert(333);

                 $('#box').hide();

             });

         });

     </script>

     <style type="text/css">

         *{margin: 0;padding: 0;}

         #box{border: 5px solid #2e2e2e;width:320px;height: 240px;background-color: #CC9900;

             -moz-border-radius: 15px;      /* Gecko browsers */

             -webkit-border-radius: 15px;   /* Webkit browsers */

                border-radius:15px;            /* W3C syntax */

                display: none;

                margin-left: 30px;

                margin-top: 20px;

            }

         #hd{background-color: #666666;font-size: 14px;padding: 4px;}

         span{float: right;padding-right: 4px;cursor: pointer;}

         #cnt{padding: 5px;}

     </style>

 </head>

 <body>

     <div id="btn">

         <a href="#">点我弹框</a>

     </div>

     <div id="box">

         <div id="hd">

             <span>关闭</span><h3>这里是标题</h3>

         </div>

         <div id="cnt">

             这里是一些文字

         </div>

     </div>

 </body>

 </html>

div的关闭

下面我们来完成另一个任务，就是拖拽

 <!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" xml:lang="en">

 <head>

     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

     <title>drag</title>

     <script src="./js/jquery-1.9.1.min.js"></script>

     <script>

         $(document).ready(function() {

             // alert(111);

             $('#btn a').click(function() {

                 // alert(222);

                 $('#box').show();

             });

             $('span').click(function() {

                 // alert(333);

                 $('#box').hide();

             });

             $('#hd').mousedown(function(event) {

                 // alert(444);

                 var isMove = true;

                 var abs_x = event.pageX - $('div#box').offset().left;

                 var abs_y = event.pageY - $('div#box').offset().top;

                 // alert(abs_x);

                 // alert(event.pageX);

                 $(document).mousemove(function(event) {

                     // alert(555);

                     if (isMove) {

                         var obj = $('div#box');

                         // alert(obj);

                         obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y});

                     };

                 }).mouseup(function(event) {

                     isMove = false;

                 });;

             });

         });

     </script>

     <style type="text/css">

         *{margin: 0;padding: 0;}

         #box{border: 5px solid #2e2e2e;width:320px;height: 240px;background-color: #CC9900;

             -moz-border-radius: 15px;      /* Gecko browsers */

             -webkit-border-radius: 15px;   /* Webkit browsers */

                border-radius:15px;            /* W3C syntax */

                display: none;

                margin-left: 30px;

                margin-top: 20px;

                position: absolute;

            }

         #hd{background-color: #666666;font-size: 14px;padding: 4px;cursor: move;}

         span{float: right;padding-right: 4px;cursor: pointer;}

         #cnt{padding: 5px;}

     </style>

 </head>

 <body>

     <div id="btn">

         <a href="#">点我弹框</a>

     </div>

     <div id="box">

         <div id="hd">

             <span>关闭</span><h3>这里是标题</h3>

         </div>

         <div id="cnt">

             这里是一些文字

         </div>

     </div>

 </body>

 </html>

拖拽

虽然过程有些曲折，但终于还是完成了。

    left = 当前鼠标位置.x - (鼠标点击时的.x值 - div的初始位置x值)

    top = 当前鼠标位置.y - (鼠标点击时的.y值 - div的初始位置y值)

。

码农公寓

相关文章