界面如图所示：

要求：在“信息注册”栏，按下鼠标，然后鼠标在页面移动，在鼠标移动过程中，该窗口跟着鼠标移动，当鼠标松开的时候，窗口停止移动。点击“关闭”，该窗口隐藏。

实现思路：

1.页面结构分析：一个大盒子d-box来确定位置，里面放一个小盒子drop（存放“注册信息（可以拖拽”文字和span标签，span存放“关闭”，id为box_close），鼠标在drop中按下，移动时候d-box跟着移动。

2.实现分析：

2.1 获取鼠标在盒子中的位置。通过鼠标在页面中的位置-盒子在页面的位置实现

①鼠标在页面的位置实现代码：

var x=e.pageX || e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);

var y=e.pageY || e.clientY + (document.body.scrollTop || document.documentElement.scrollTop);

　　②盒子在页面中位置实现代码：

　   var box_x=box.offsetLeft;

　   var box_y=box.offsetTop;

　　③鼠标在盒子中的位置实现代码：

　   var mouse_in_box_x=x-box_x;

　   var mouse_in_box_y=y-box_y;

2.2 获取鼠标移动时盒子移动的位置。通过鼠标移动时，鼠标在页面的位置-鼠标在盒子中的位置实现。

　   ①鼠标在页面的位置

var x=e.pageX || e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);

var y=e.pageY || e.clientY + (document.body.scrollTop || document.documentElement.scrollTop);

　　②鼠标移动时盒子移动的位置代码实现：

　  var boxX=x-mouse_in_box_x;

var boxY=y-mouse_in_box_y;

2.3 给盒子样式赋值

　　 box.style.left=boxX+'px';

　    box.style.top=boxY+'px';

3.注意：

①要移动的盒子，其pisition必须赋值，absolute或者relative，必须使其脱离文档流才能移动

②给盒子样式赋值时，一定要注意不能丢掉px单位

③事件对象e，位置e.pageX,滚动条滚动距离的兼容性。以前的博文里面有记录，完整代码中也做了处理。

完整代码如下：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>鼠标拖拽案例</title>

         <style type="text/css">

             *{

                 margin: 0px;

                 padding: 0px;

             }

             .d-box{

                 width: 400px;

                 height: 300px;

                 border: 5px solid #eee;

                 box-shadow: 2px 2px 2px 2px #666;

                 position: absolute;

                 top: 40%;

                 left: 40%;

                 background-color: white;

             }

             .hd{

                 height: 25px;

                 background-color: #7c9299;

                 color: white;

                 line-height: 25px;

                 cursor: move;

                 border-bottom: 1px solid #369;

             }

             #box_close{

                 float: right;

                 cursor: pointer;

             }

         </style>

     </head>

     <body>

         <div id="d-box" class="d-box">

             <div id="drop" class="hd">注册信息（可以拖拽）

                 <span id="box_close">【关闭】</span>

             </div>

         </div>

         <!-- 插入JS代码 -->

         <script type="text/javascript">

             /****************************盒子拖拽功能********************************/

             //点击拖拽的“注册信息栏”，拖动整个盒子的移动。首先获得要拖拽的盒子

             var box=document.getElementById('d-box');

             var drop=document.getElementById('drop');

             drop.onmousedown=function(e){

                 e = e || window.event;

                 //当鼠标按下的时候,获得鼠标在盒子中的位置

                 //鼠标在盒子中的位置=鼠标在页面中的位置-盒子在页面的位置

                 //鼠标在页面中的位置

                 var x=e.pageX || e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);

                 var y=e.pageY || e.clientY + (document.body.scrollTop || document.documentElement.scrollTop);

                 //盒子在页面中的位置

                 var box_x=box.offsetLeft;

                 var box_y=box.offsetTop;

                 //鼠标在盒子中的位置

                 var mouse_in_box_x=x-box_x;

                 var mouse_in_box_y=y-box_y;

                 //注册鼠标移动事件,因为鼠标按下后,在页面移动,盒子跟着移动

                 document.onmousemove=function(e){

                     e = e || window.event;

                     //鼠标在页面中移动时,求盒子的坐标

                     //鼠标移动时盒子移动位置=鼠标当前位置-鼠标在盒子中移动的距离

                      x=e.pageX || e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);

                      y=e.pageY || e.clientY + (document.body.scrollTop || document.documentElement.scrollTop);

                     var boxX=x-mouse_in_box_x;

                     var boxY=y-mouse_in_box_y;

                     //px一定不能忘

                     box.style.left=boxX+'px';

                     box.style.top=boxY+'px';

                 }

             }

             //当鼠标弹起时,移出鼠标移动事件

             drop.onmouseup=function(){

                 document.onmousemove=null;

             }

             //点击关闭盒子,隐藏盒子

             var box_close=document.getElementById('box_close');

             box_close.onclick=function(){

                 box.style.display='none';

             }

         </script>

     </body>

 </html>

javascript--鼠标拖拽窗口案例（鼠标按下，在鼠标移动过程中，盒子跟着一起移动，鼠标松开，盒子停止移动）的更多相关文章

  1. javascript鼠标拖拽的那些事情

    <html> <head> <title>javascript鼠标拖拽的那些事情</title> <meta http-equiv="C ...

  2. day50—JavaScript鼠标拖拽事件

    转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...

  3. JavaScript鼠标拖拽特效及相关问题总结

    #div1{width:200px;height:200px;background:red;position:absolute;} #div2{width:200px;height:200px;bac ...

  4. js - 面向对象 - 小案例：轮播图、随机点名、选项卡、鼠标拖拽

    面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...

  5. 鼠标拖拽定位和DOM各种尺寸详解

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. CSharpGL(20)用unProject和Project实现鼠标拖拽图元

    CSharpGL(20)用unProject和Project实现鼠标拖拽图元 效果图 例如,你可以把Big Dipper这个模型拽成下面这个样子. 配合旋转,还可以继续拖拽成这样. 当然,能拖拽的不只 ...

  7. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  8. 鼠标拖拽移动Java界面组件

    默认的,Frame或者JFrame自身已经实现了鼠标拖拽标题栏移动窗口的功能. 只是,当你不满意java的JFrame样式,隐藏了标题栏和边框,又或者干脆直接使用JWindow,那你又该怎么实现鼠标拖 ...

  9. 完美实现鼠标拖拽事件，解决各种小bug，基于jquery

    鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...

随机推荐

  1. SQLAlchemy的使用---外键ForeignKey数据库创建与连接

    # 一对多建表操作 from sqlalchemy.ext.declarative import declarative_base Base = declarative_base() from sql ...

  2. PHP性能检测与优化—XHProf 数据阅读

    PHP性能检测与优化—XHProf 数据阅读 一.      效果如下 请求总揽 函数调用情况 二.      参数含义 Inclusive Time              包括子函数所有执行时间 ...

  3. C++基础--malloc和new的区别

    (1)malloc在C和C++中都可以使用,用来申请一段内存:申请的内存一定要用free释放,然后把指针置为null: new只能在C++中使用,用于动态内存分配:new的对象要delete掉: (2 ...

  4. webstorm 2017.1 破译

    安装完webstorm后, 在弹出的注册窗口选择 activate > license server > 在 License server address 里输入 "http:/ ...

  5. 新发布 | 微软开源之路最新进展：FreeBSD落地由世纪互联营运的Microsoft Azure

    微软和开源,是近几年业界孜孜不倦的讨论话题,微软也在开源之路越走越宽.最近与 FreeBSD 基金更紧密的合作踏出了微软在开源之路上的又一大步. 自2012年开始,微软在 FreeBSD 与其虚拟化平 ...

  6. SQL Server ->> 生成代码把表字段从NULL改为NOT NULL

    一般我们用SELECT .... INTO语句生成的表字段都是允许为NULL.而如果我们需要改成NOT NULL呢 select 'ALTER TABLE dbo.XXXXXXX ALTER COLU ...

  7. Python 调度算法 死锁 静动态链接(七)

    1 select poll epoll的区别 基本上select有3个缺点: 连接数受限 查找配对速度慢 数据由内核拷贝到用户态 poll改善了第一个缺点 epoll改了三个缺点. (1)select ...

  8. 二、安装桌面——Linux学习笔记

    安装桌面并不是商业化用的,只是为了熟悉Linux文档结构而已. 这个比较简单 1.输入安装桌面命令 # yum -y groups install "GNOME Desktop" ...

  9. IEEP-网络设计

    IEEP-网络设计 网络设计概述 网络设计概述 1.负责把网络规划阶段获得的客户需求运用技术手段予以规范化体现 2.网络设计一般遵循模块化指导方针,分模块进行设计 3.网络设计的输出成果必须是规范的. ...

  10. 笨办法学Python（三十九）

    习题 39: 列表的操作 你已经学过了列表.在你学习“while 循环”的时候,你对列表进行过“追加(append)”操作,而且将列表的内容打印了出来.另外你应该还在加分习题里研究过 Python 文 ...