js实现小窗口拖拽效果


Posted in Javascript onDecember 03, 2016

本文实例为大家分享了js实现窗口拖拽的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
 
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 #box {
 height: 300px;
 width: 300px;
 background-color: green;
 position: absolute;
 }
 </style>
 </head>
 
 <body>
 <div id="box">
 
 </div>
 </body>
 <script type="text/javascript">
 var box = document.getElementById("box");
 //鼠标按下的函数
 box.onmousedown = function(ev) {
 var oEvent = ev || event;
 //求出鼠标和box的位置差值
 var x = oEvent.clientX - box.offsetLeft;
 var y = oEvent.clientY - box.offsetTop;
 //鼠标移动的函数
 //把事件加在document上,解决因为鼠标移动太快时,
 //鼠标超过box后就没有了拖拽的效果的问题
 document.onmousemove = function(ev) {
  var oEvent = ev || event;
 
  //保证拖拽框一直保持在浏览器窗口内部,不能被拖出的浏览器窗口的范围
  var l = oEvent.clientX - x;
  var t = oEvent.clientY - y;
  if(l < 0) {
  l = 0;
 
  } else if(l > document.documentElement.clientWidth - box.offsetWidth) {
  l = document.documentElement.clientWidth - box.offsetWidth;
  }
  if(t < 0) {
  t = 0;
  } else if(t > document.documentElement.clientHeight - box.offsetHeight) {
  t = document.documentElement.clientHeight - box.offsetHeight;
  }
  box.style.left = l + "px";
  box.style.top = t + "px";
 }
 //鼠标抬起的函数
 document.onmouseup = function() {
  document.onmousemove = null;
  document.onmouseup = null;
 }
 //火狐浏览器在拖拽空div时会出现bug
 //return false阻止默认事件,解决火狐的bug
 return false;
 
 }
 </script>
 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS中处理与当前时间间隔的函数代码
May 23 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
Node.js中创建和管理外部进程详解
Aug 16 Javascript
javascript中clone对象详解
Dec 03 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
jqPlot jQuery绘图插件的使用
Jun 18 Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
js实现简单的计算器功能
Jan 16 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
vue.js实现的幻灯片功能示例
Jan 18 Javascript
学习vue.js计算属性
Dec 03 #Javascript
学习vue.js中class与style绑定
Dec 03 #Javascript
jQuery图片轮播实现并封装(一)
Dec 03 #Javascript
jQuery 选择符详细介绍及整理
Dec 02 #Javascript
JQuery 动态生成Table表格实例代码
Dec 02 #Javascript
jQuery实现背景滑动菜单
Dec 02 #Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 #Javascript
You might like
解析PHP中ob_start()函数的用法
2013/06/24 PHP
解析php下载远程图片函数 可伪造来路
2013/06/25 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
document.documentElement &amp;&amp; document.documentElement.scrollTop
2007/12/01 Javascript
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
基于jquery循环map功能的代码
2011/02/26 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
python 打印对象的所有属性值的方法
2016/09/11 Python
Python编程之string相关操作实例详解
2017/07/22 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
python导入坐标点的具体操作
2019/05/10 Python
python画双y轴图像的示例代码
2019/07/07 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
Python 自由定制表格的实现示例
2020/03/20 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
个人自我鉴定范文
2013/10/04 职场文书
网络工程专业毕业生推荐信
2013/10/28 职场文书
平面设计师的工作职责
2013/11/21 职场文书
大二学生职业生涯规划书
2014/02/05 职场文书
博士毕业生自我鉴定范文
2014/04/13 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
未婚证明范本
2015/06/15 职场文书
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android