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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
Angular工具方法学习
Dec 26 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 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
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
php保存信息到当前Session的方法
2015/03/16 PHP
PHP数组相关函数汇总
2015/03/24 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
无阻塞加载脚本分析[全]
2011/01/20 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
js中document.write的那点事
2014/12/12 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
Django 导出 Excel 代码的实例详解
2017/08/11 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
python中os.remove()用法及注意事项
2021/01/31 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
《阳光》教学反思
2014/02/23 职场文书
2015年党性分析材料
2014/12/19 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python