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 相关文章推荐
JS 面向对象之神奇的prototype
Feb 26 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
jquery获取一组checkbox的值(实例代码)
Nov 04 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 Javascript
jQuery设置和获取HTML、文本和值示例
Jul 08 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
jQuery实现级联下拉框实战(5)
Feb 08 Javascript
Vue filter介绍及详细使用
Apr 04 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
多种方法实现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
VOLVO车载收音机
2021/03/02 无线电
php.ini中文版
2006/10/09 PHP
使用PHP获取网络文件的实现代码
2010/01/01 PHP
详解js异步文件加载器
2016/01/24 PHP
php常用图片处理类
2016/03/16 PHP
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
微信小程序访问豆瓣电影api的实现方法
2019/03/31 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
python实现的解析crontab配置文件代码
2014/06/30 Python
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
结婚邀请函范文
2014/01/14 职场文书
最新会计专业求职信范文
2014/01/28 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
奶茶店创业计划书
2014/08/14 职场文书
奥巴马上海演讲稿
2014/09/10 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
圣诞晚会主持词
2015/07/01 职场文书