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

这里我看了下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值)

。

jQuery 学习笔记3 点击弹出一个div并允许拖拽移动的更多相关文章

点击文字弹出一个DIV层窗口代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
jQuery 学习笔记2 点击时弹出一个对话框
上次学习的是页面加载完成后弹出一个警告框,这里我们改为当用户点击后弹出一个警告框. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
jQuery第二课点击弹出一个提示框
选择器允许您对元素组或单个元素进行操作. jQuery 选择器在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元 ...
点击按钮弹出一个div层
JQuery弹出层,点击按钮后弹出遮罩层,还有关闭按钮 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml& ...
点击文字弹出一个DIV层窗口代码【或FORM表单并且获取点击按钮的ID值】
点击不同按钮咨询不同的专家 <?php for($i=1;$i<5;$i++){ $uid=$i; //用户ID ?> <a class="a_click" ...
Jquery学习之路(三) 实现弹出层插件
弹出层的应用还是比较多的,登陆,一些同页面的操作,别人的总归是别人的,自己的才是自己的,所以一直以来想写个弹出层插件.不多废话,直接开始吧! 不想看可以在这里直接下载源码xsPop.zip 1:遮罩层 ...
elementUI 弹出框添加可自定义拖拽和拉伸功能，并处理边界问题
开发完后台管理系统的弹出框模块,被添加拖拽和拉伸功能,看了很多网上成熟的帖子引到项目里总有一点问题,下面是根据自己的需求实现的步骤: 首先在vue项目中创建一个js文件eg:dialog.js imp ...
jQuery第一课加载页面弹出一个对话框
<script type="text/javascript"> $(document).ready(function(){ alert("欢迎收看:" ...
页面table的每行都有一个<input type='button' />,如何实现点击按钮在按钮下方弹出一个div，点击空白消失
\ <input id="test" type="button" />/*按钮*/ <div id="tanchu"> ...

随机推荐

SpringBoot配置属性之NOSQL
SpringBoot配置属性系列 SpringBoot配置属性之MVC SpringBoot配置属性之Server SpringBoot配置属性之DataSource SpringBoot配置属性之N ...
【Android】Android如何对APK签名
在eclipse项目,生成的apk是自动签名的,因此无需关心.接下来笔者介绍通过DOS窗口对APK进行签名,以及签名的过程中需要注意的问题. 1.为什么需要对APK签名所有的Android应用程序都 ...
[Aaronyang] 写给自己的WPF4.5 笔记5[数据绑定三巴掌1/3]
生活总有意外,微笑对待每一件事,无需抱怨--Aaronyang的博客(www.ayjs.net) 博文摘要:数据库下载教你如何在vs2013中不安装Mssql数据库,使用了Sqlserver Com ...
【转】Lisp 已死，Lisp 万岁！
Lisp 已死,Lisp 万岁! 有一句古话,叫做“国王已死,国王万岁!”它的意思是,老国王已经死去,国王的儿子现在继位.这句话的幽默,就在于这两个“国王”其实指的不是同一个人,而你咋一看还以为它自相 ...
谁说C语言很简单？
前两天,Neo写了一篇<语言的歧义>其使用C语言讨论了一些语言的歧义.大家应该也顺便了解了一下C语言中的很多不可思异的东西,可能也是你从未注意到的东西. 是的,C语言并不简单,让我们来看看 ...
springboot 多环境配置yml或properties
https://www.cnblogs.com/mr-yang-localhost/p/8971327.html springboot 多环境配置 https://blog.csdn.net/li ...
python执行selenium报错
python + unittest + HTMLTestRunner 执行suite用例报错 Traceback (most recent call last): File "C:/ws/S ...
java 泛型中class<T> 和T的区别是什么？
public <T> boolean edit(T entity) 和public <T> T get(Class<T> c, Serializable id)中这 ...
svm工具箱快速入手简易教程
首先svm是用来做分类的,是一种有监督的分类器. 什么是有监督的呢?就是说在你给我一个数据集让我做分类之前.我已经有一些经验数据了.即要先进行学习,再进行分类. 这里就有了训练集和测试集.先用训练集来 ...
oracle PLSQL 多结果集嵌套循环处理优化
oracle多结果集嵌套循环处理优化 --性能差 begin for a in (select id,name,sex,idcard from people) loop for b in (selec ...

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

jQuery 学习笔记3 点击弹出一个div并允许拖拽移动的更多相关文章

随机推荐

热门专题