zoukankan      html  css  js  c++  java

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

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

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

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>drag</title>
 6 
 7     <style type="text/css">
 8         *{margin: 0;padding: 0;}
 9         #box{border: 5px solid #2e2e2e;width:320px;height: 240px;background-color: #CC9900;
10             -moz-border-radius: 15px;      /* Gecko browsers */
11             -webkit-border-radius: 15px;   /* Webkit browsers */
12                border-radius:15px;            /* W3C syntax */
13            }
14         #hd{background-color: #666666;font-size: 14px;padding: 4px;}
15         span{float: right;padding-right: 4px;}
16         #cnt{padding: 5px;}
17     </style>
18 </head>
19 <body>
20     <div id="btn">
21         <a href="#">点我弹框</a>
22     </div>
23     <div id="box">
24         <div id="hd">
25             <span>关闭</span><h3>这里是标题</h3>
26         </div>
27         <div id="cnt">
28             这里是一些文字
29         </div>
30     </div>
31 </body>
32 </html>

    首先做点css，效果如下

    然后隐藏div，添加jquery

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>drag</title>
 6     <script src="./js/jquery-1.9.1.min.js"></script>
 7     <script>
 8         $(document).ready(function() {
 9             // alert(111);
10             $('#btn a').click(function() {
11                 // alert(222);
12                 $('#box').show();
13             });    
14         });    
15     </script>
16 
17     <style type="text/css">
18         *{margin: 0;padding: 0;}
19         #box{border: 5px solid #2e2e2e;width:320px;height: 240px;background-color: #CC9900;
20             -moz-border-radius: 15px;      /* Gecko browsers */
21             -webkit-border-radius: 15px;   /* Webkit browsers */
22                border-radius:15px;            /* W3C syntax */
23                display: none;
24                margin-left: 30px;
25                margin-top: 20px;
26            }
27         #hd{background-color: #666666;font-size: 14px;padding: 4px;}
28         span{float: right;padding-right: 4px;}
29         #cnt{padding: 5px;}
30     </style>
31 </head>
32 <body>
33     <div id="btn">
34         <a href="#">点我弹框</a>
35     </div>
36     <div id="box">
37         <div id="hd">
38             <span>关闭</span><h3>这里是标题</h3>
39         </div>
40         <div id="cnt">
41             这里是一些文字
42         </div>
43     </div>
44 </body>
45 </html>

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

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>drag</title>
 6     <script src="./js/jquery-1.9.1.min.js"></script>
 7     <script>
 8         $(document).ready(function() {
 9             // alert(111);
10             $('#btn a').click(function() {
11                 // alert(222);
12                 $('#box').show();
13             });    
14             $('span').click(function() {
15                 // alert(333);
16                 $('#box').hide();
17             });
18         });    
19     </script>
20 
21     <style type="text/css">
22         *{margin: 0;padding: 0;}
23         #box{border: 5px solid #2e2e2e;width:320px;height: 240px;background-color: #CC9900;
24             -moz-border-radius: 15px;      /* Gecko browsers */
25             -webkit-border-radius: 15px;   /* Webkit browsers */
26                border-radius:15px;            /* W3C syntax */
27                display: none;
28                margin-left: 30px;
29                margin-top: 20px;
30            }
31         #hd{background-color: #666666;font-size: 14px;padding: 4px;}
32         span{float: right;padding-right: 4px;cursor: pointer;}
33         #cnt{padding: 5px;}
34     </style>
35 </head>
36 <body>
37     <div id="btn">
38         <a href="#">点我弹框</a>
39     </div>
40     <div id="box">
41         <div id="hd">
42             <span>关闭</span><h3>这里是标题</h3>
43         </div>
44         <div id="cnt">
45             这里是一些文字
46         </div>
47     </div>
48 </body>
49 </html>
    div的关闭

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

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>drag</title>
 6     <script src="./js/jquery-1.9.1.min.js"></script>
 7     <script>
 8         $(document).ready(function() {
 9             // alert(111);
10             $('#btn a').click(function() {
11                 // alert(222);
12                 $('#box').show();
13             });    
14             $('span').click(function() {
15                 // alert(333);
16                 $('#box').hide();
17             });
18 
19             $('#hd').mousedown(function(event) {
20                 // alert(444);
21                 var isMove = true;
22                 var abs_x = event.pageX - $('div#box').offset().left;
23                 var abs_y = event.pageY - $('div#box').offset().top;
24                 // alert(abs_x);
25                 // alert(event.pageX);
26                 $(document).mousemove(function(event) {
27                     // alert(555);
28                     if (isMove) {
29                         var obj = $('div#box');
30                         // alert(obj);
31                         obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y});
32                     };
33                 }).mouseup(function(event) {
34                     isMove = false;
35                 });;
36             }); 
37         });    
38     </script>
39 
40     <style type="text/css">
41         *{margin: 0;padding: 0;}
42         #box{border: 5px solid #2e2e2e;width:320px;height: 240px;background-color: #CC9900;
43             -moz-border-radius: 15px;      /* Gecko browsers */
44             -webkit-border-radius: 15px;   /* Webkit browsers */
45                border-radius:15px;            /* W3C syntax */
46                display: none;
47                margin-left: 30px;
48                margin-top: 20px;
49                position: absolute; 
50            }
51         #hd{background-color: #666666;font-size: 14px;padding: 4px;cursor: move;}
52         span{float: right;padding-right: 4px;cursor: pointer;}
53         #cnt{padding: 5px;}
54     </style>
55 </head>
56 <body>
57     <div id="btn">
58         <a href="#">点我弹框</a>
59     </div>
60     <div id="box">
61         <div id="hd">
62             <span>关闭</span><h3>这里是标题</h3>
63         </div>
64         <div id="cnt">
65             这里是一些文字
66         </div>
67     </div>
68 </body>
69 </html>
    拖拽

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

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

    。
  • 相关阅读:
    云计算大会有感—MapReduce和UDF
    C++对象模型
    oracle中LAG()和LEAD()等分析统计函数的使用方法(统计月增长率)
    .NET MVC学习笔记（一）
    解决mysql控制台查询数据乱码的问题，有图有真相
    java linux 项目常常无故被关闭　进程无故消息
    android点滴之ContentObserver的使用
    GEF-whole-upload教程中遇到的问题及解决方案
    第四届蓝桥杯JavaB组省赛真题
    第四届蓝桥杯JavaA组省赛真题
  • 原文地址：https://www.cnblogs.com/tk091/p/3452350.html
Copyright © 2011-2022 走看看