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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
jQuery select的操作实现代码
May 06 Javascript
JavaScript prototype对象的属性说明
Mar 13 Javascript
javascript-简单的计算器实现步骤分解(附图)
May 30 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
11种ASP连接数据库的方法
Sep 18 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 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开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
起点页面传值js,有空研究学习下
2010/01/25 Javascript
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
python实现封装得到virustotal扫描结果
2014/10/05 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
python3 shelve模块的详解
2017/07/08 Python
在Python中使用Neo4j的方法
2019/03/14 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
Python接口开发实现步骤详解
2020/04/26 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
致铅球运动员广播稿精选
2014/01/12 职场文书
大专毕业自我鉴定
2014/02/04 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
自我鉴定总结
2014/03/24 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
会计师事务所实习证明
2014/11/16 职场文书
工程质检员岗位职责
2015/04/08 职场文书
公司门卫岗位职责
2015/04/13 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
导游词之麻姑仙境
2019/11/18 职场文书
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python