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 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
Jquery乱码的一次解决过程 图解教程
Feb 20 Javascript
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
Mar 28 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 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版(5)
2006/10/09 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
vue+animation实现翻页动画
2020/06/29 Javascript
用python写的一个wordpress的采集程序
2016/02/27 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
详解Python中的分支和循环结构
2020/02/11 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
单位委托书
2014/10/15 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
市场部岗位职责范本
2015/04/15 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫