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 相关文章推荐
?牟┛途W扣了一??效果出?? target=
May 27 Javascript
清除网页历史记录,屏蔽后退按钮!
Dec 22 Javascript
小试JQuery的AutoComplete插件
May 04 Javascript
Javascript实现滚动图片新闻的实例代码
Nov 27 Javascript
jquery操作cookie插件分享
Jan 14 Javascript
初识Node.js
Sep 03 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
vue 动态添加class,三个以上的条件做判断方式
Nov 02 Javascript
vue使用节流函数的踩坑实例指南
May 20 Vue.js
学习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
生成缩略图
2006/10/09 PHP
php中$this-&amp;gt;含义分析
2009/11/29 PHP
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
Js实现复选框的全选、全不选反选功能代码实例
2020/02/28 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
python基于win32api实现键盘输入
2020/12/09 Python
python中的对数log函数表示及用法
2020/12/09 Python
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
材料加工工程求职信
2014/02/19 职场文书
股东协议书范本
2014/04/14 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
小学生安全教育心得体会
2016/01/15 职场文书