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 相关文章推荐
JavaScript 面向对象编程(1) 基础
May 18 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
JS批量修改PS中图层名称的方法
Jan 26 Javascript
JavaScript中的数组特性介绍
Dec 30 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
jQuery实现带延迟效果的滑动菜单代码
Sep 02 Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
Seajs源码详解分析
Apr 02 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 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
PHPMyAdmin 快速配置方法
2009/05/11 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
Web打印解决方案之普通报表打印功能
2016/08/29 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
JavaScript注册时密码强度校验代码
2017/06/30 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
详解如何让Express支持async/await
2017/10/09 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
Vue中props的详解
2019/05/16 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
学前教育专业毕业生自荐信
2013/10/03 职场文书
社会公德演讲稿
2014/05/20 职场文书
美术社团活动总结
2014/06/27 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
高三复习计划
2015/01/19 职场文书
会议主持词开场白
2015/05/28 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
小学教代会开幕词
2016/03/04 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
python3操作redis实现List列表实例
2021/08/04 Python