JS实现拖动示例代码

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


代码如下:

document.documentElement.getBoundingClientRect

该方法返回一个对象，从而获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置，即分别代表该元素上、左、右、下四条边界相对于浏览器窗口左上角（注意，不是文档区域的左上角）的偏移像素值。并且该方法已经不再是IE Only了，FF3.0+和Opera9.5+已经支持了该方法，可以说在获得页面元素位置上效率能有很大的提高，所以获取页面上某个元素相对于浏览器窗口的偏移量就成了getBoundingClientRect的用武之地了，按照一篇文章的说法，it's awsome，太帅了=。=因为不必纠结于offset、pagex、clientx等等等等等等。在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。
 
 
代码示例：


代码如下:

<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>

赞 (0)

相关推荐

  • js用拖动滑块来控制图片大小的方法

    本文实例讲述了js用拖动滑块来控制图片大小的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv=Content-Type content="text/html;charset=gb2312"> <title&g

  • JS+CSS实现可拖动的弹出提示框

    本文实例讲述了JS+CSS实现可拖动的弹出提示框.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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&

  • 通过遮罩层实现浮层DIV登录的js代码

    这个就没什么好说的了..直接上代码啊!! 首先是HTML的代码.其中包含了登录点击按钮以及一个简陋的登录框. 复制代码 代码如下: <body> <div id="shade"></div> <div> <a onclick="login()" style="cursor:pointer">登录</a> </div> <br/> 什么都没有用...&l

  • 原生JS可拖动弹窗效果实例代码

    原生JS可拖动弹窗效果实例代码

    这个代码不是我原创的,只是最近想学自己做一个很漂亮的弹窗,自己本来是不会怎么写的,所以上网去找了下,感觉这个不错,很简单,很实用,入门很棒.我就改了下,使逻辑性和可读性更好. 原作者已不可考.感谢原作者,阿门. 复制代码 代码如下: <html>    <head>        <meta http-equiv="Content-Type"content="text/html; charset=gb2312"/>       

  • JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例

    本文实例讲述了JS实现可缩放.拖动.关闭和最小化的浮动窗口方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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

  • js实现可拖动DIV的方法

    随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的windows8 系统的App都可以用js开发了,大家有时间可以去尝试一下. 现在切入正题,说一下js 实现可拖动Div.实现这个功能我们先说一下思路: 1.捕捉鼠标div的mousedown事件 2.捕捉 document的   mousemove事件 3.取消事件 然后我们看一下代码: 复制代码 代码如

  • Js可拖拽放大的层拖动特效实现方法

    本文实例讲述了Js可拖拽放大的层拖动特效实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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&

  • js实现图片拖动改变顺序附图

    js实现图片拖动改变顺序附图

    在web页面中,需要改变多个元素的位置,可以通过元素拖动来实现.HTML5中加入了一个全局属性draggable,通过设置true/false来控制元素是否可拖动. 下面以图片拖动为例,用jQuery来实现:页面上有多个图片,把一个图片拖动到其他两个图片中间,就可以将这个图片的位置插入到两图之间. 复制代码 代码如下: <!DOCTYPE html> <html> <head> <style> .img-div img { width:200px; heig

  • JS实现动态移动层及拖动浮层关闭的方法

    本文实例讲述了JS实现动态移动层及拖动浮层关闭的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>动态移动的层</title> <body bgcolor="#ADBAC9"> <div id="div1" class="yellow" style="VISIBILITY:visible ; background-color:#FF

  • JS实现拖动示例代码

    JS实现拖动示例代码

    getBoundingClientRect() 来获取页面元素的位置 复制代码 代码如下: document.documentElement.getBoundingClientRect 该方法返回一个对象,从而获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,即分别代表该元素上.左.右.下四条边界相对于浏览器窗口左上角(注意,不是文档区域的左上角)的偏移像素值.并且该方法已经不再是IE Only了,FF3.0+和Opera9.5+已经支持了该方法,可以说在获得页面元素位置上效率能有很大

  • 让元素在网页中可拖动示例代码

    1.导入相应的JS类库: 复制代码 代码如下: <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 2.带有id的div元素: 复制代码 代码如下: <div id="draggable&qu

  • js切换光标示例代码

    复制代码 代码如下: <!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> <title>js切换光标<

  • 异步动态加载JS并运行(示例代码)

    如下所示: 复制代码 代码如下: (function(){var ga=document.createElement('script');ga.type?=?'text/javascript';?ga.async?=?true;ga.src?=?('https:'?==?document.location.protocol???'https://ssl'?:?'http://www')?+?'.google-analytics.com/ga.js';    var?s?=?document.ge

  • 如何让DIV可编辑、可拖动示例代码

    1.可编辑: <div id="move" contentEditable="true">可编辑</div> 设置contentEditable属性可以让div编程可编辑状态 2.可拖动: $('#move').draggable(); 使用jQuery UI的draggable可以让div变成可拖动状态,但是如果两个属性同时应用就会出现可编辑功能失效的状况. 3.可编辑.可拖动: 复制代码 代码如下: <div id="mo

  • JavaScript模块随意拖动示例代码

    复制代码 代码如下: <!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=&qu

  • js替代copy(示例代码)

    复制代码 代码如下: <script type="text/javascript">function copyCode(id){var testCode=document.getElementById(id).value;if(copy2Clipboard(testCode)!=false){alert("生成的代码已经复制到粘贴板,你可以使用Ctrl+V 贴到需要的地方去了哦! ");}}copy2Clipboard=function(txt){if(

  • 动态加载dtree.js树treeview(示例代码)

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Destroydrop » Javascripts » Tree</title><link rel="StyleSh

  • js导出txt示例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <

  • Django与JS交互的示例代码

    Django与JS交互的示例代码

    应用一:有时候我们想把一个 list 或者 dict 传递给 javascript,处理后显示到网页上,比如要用 js 进行可视化的数据. 请注意:如果是不处理,直接显示在网页上,用Django模板就可以了. 这里讲述两种方法: 一,页面加载完成后,在页面上操作,在页面上通过 ajax 方法得到新的数据(再向服务器发送一次请求)并显示在网页上,这种情况适用于页面不刷新的情况下,动态加载一些内容.比如用户输入一个值或者点击某个地方,动态地把相应内容显示在网页上. 二,直接在视图函数(views.p

随机推荐