界面如图所示:

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

实现思路:

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. mockito 初识

    转载:http://blog.csdn.net/zhoudaxia/article/details/33056093 在平时的开发工作中,经常会碰到开发进度不一致,导致你要调用的接口还没好,此时又需要 ...

  2. 关于window的端口查看及tomcat的端口修改问题

    1.Windows平台 在windows命令行窗口下执行: 1.查看所有的端口占用情况 C:\>netstat -ano 协议    本地地址                     外部地址  ...

  3. 【阿里云产品公测】性能测试服务PTS初体验

    作者:阿里云用户装甲兵 第一步,在九大产品免费公测 页面,点击性能测试服务PTS的申请公测按钮: 点击申请公测后,正确填写个人信息,免费申请性能测试服务PTS: 填写完成后,点击申请提交,耐心等待,一 ...

  4. 【IOS】Mac和IOS开发资源汇总

    本文主要汇集一些苹果开发的资源,会经常更新,建议大家把这篇文章单独收藏(在浏览器中按**command+D**). 今天收录了许多中文网站和博客.大家一定要去感受一下哦. 如果大家有知道不错的站点,可 ...

  5. Android 自定义圆形图表

    <com...SignChartView android:id="@+id/signChart" android:layout_width="265dp" ...

  6. 本地数据库(sql server)插入一条新数据时,同步到服务器数据库

    之前有个同学问我,本地数据库插入新数据时怎么同步到服务器上,当时我先想到是程序逻辑控制,作相应的处理. 但有时候我们程序不太好处理,那能不能从数据库入手呢,数据库不是有触发器(Trigger)吗,应该 ...

  7. wmware共享磁盘redhat 5.8挂载问题

    需要修改参数vi /etc/sysconfig/selinux将SELINUX=enforcing改为SELINUX=disabled,这样重启服务器则不会启动selinux服务 不然重启虚拟机后共享 ...

  8. oracle备份恢复

    1.oracle文件备份恢复 /etc/oraInst.loc /etc/oratab /home/oracle 家目录 /oracle 安装目录 /usr/local/bin/dbhome /usr ...

  9. c++互斥锁的实现

    class IMyLock { public: virtual ~IMyLock(){} ; ; }; class Mutex : public IMyLock { public: Mutex(); ...

  10. 03_P52 课后作业

    1. 软件开发的早期阶段为什么进行可行性研究?应该从哪些方面研究系统的可行性? 1.进行可行性研究是为了该软件项目是否值得开发?是否具有经济效益?是否违反法律道德?是否技术可以实现?是否风险性高? 2 ...