JS实现拖动示例代码


Posted in Javascript onNovember 01, 2013

getBoundingClientRect() 来获取页面元素的位置

document.documentElement.getBoundingClientRect

该方法返回一个对象,从而获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,即分别代表该元素上、左、右、下四条边界相对于浏览器窗口左上角(注意,不是文档区域的左上角)的偏移像素值。并且该方法已经不再是IE Only了,FF3.0+和Opera9.5+已经支持了该方法,可以说在获得页面元素位置上效率能有很大的提高,所以获取页面上某个元素相对于浏览器窗口的偏移量就成了getBoundingClientRect的用武之地了,按照一篇文章的说法,it's awsome,太帅了=。=因为不必纠结于offset、pagex、clientx等等等等等等。在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。
JS实现拖动示例代码 
JS实现拖动示例代码 
代码示例:
<span style="font-size:14px"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Demo</title> 
</head> <body style="width:2000px; height:1000px;"> 
<div id="demo" style="position:absolute; left:518px; right:100px; width:500px; height:500px; background:#CC0000; top: 114px;">Demo为了方便就直接用绝对定位的元素</div> 
</body> 
</html> 
<script> 
document.getElementById('demo').onclick=function (){ 
if (document.documentElement.getBoundingClientRect) { 
alert("left:"+this.getBoundingClientRect().left) 
alert("top:"+this.getBoundingClientRect().top) 
alert("right:"+this.getBoundingClientRect().right) 
alert("bottom:"+this.getBoundingClientRect().bottom) 
<strong>var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft; 
var Y = this.getBoundingClientRect().top+document.documentElement.scrollTop;</strong> 
alert("Demo的位置是X:"+X+";Y:"+Y) 
} 
} 
</script></span>
Javascript 相关文章推荐
javascript中对变量类型的判断方法
Aug 09 Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
react实现点击选中的li高亮的示例代码
May 24 Javascript
Node.js Buffer模块功能及常用方法实例分析
Jan 05 Javascript
微信小程序常用简易小函数总结
Feb 01 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
node 标准输入流和输出流代码实例
Sep 19 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 Javascript
多种方法实现JS动态添加事件
Nov 01 #Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 #Javascript
jQuery Mobile 导航栏代码
Nov 01 #Javascript
js将json格式内容转换成对象的方法
Nov 01 #Javascript
JS实现切换标签页效果实例代码
Nov 01 #Javascript
Javascript delete 引用类型对象
Nov 01 #Javascript
理解Javascript闭包
Nov 01 #Javascript
You might like
深入PHP运行环境配置的详解
2013/06/04 PHP
如何用php获取程序执行的时间
2013/06/09 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
详解AngularJS 过滤器的使用
2018/06/02 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
js实现金山打字通小游戏
2020/07/24 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
python实现批量修改文件名代码
2017/09/10 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
优秀学生评语大全
2014/04/25 职场文书
大学生社团活动总结
2014/04/26 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
2016校本研修培训心得体会
2016/01/08 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python
Spring Boot mybatis-config 和 log4j 输出sql 日志的方式
2021/07/26 Java/Android
Redis分布式锁Redlock的实现
2021/08/07 Redis
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS