JS实现拖动示例代码_javascript技巧

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>

时间: 2024-11-15 16:26:03

JS实现拖动示例代码_javascript技巧的相关文章

动态加载dtree.js树treeview(示例代码)_javascript技巧

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

如何让DIV可编辑、可拖动示例代码_javascript技巧

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

js切换光标示例代码_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> <title>js切换光标<

js导出txt示例代码_javascript技巧

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

js替代copy(示例代码)_javascript技巧

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

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

如下所示: 复制代码 代码如下: (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

js图片处理示例代码_javascript技巧

复制代码 代码如下: var ImgObj=new Image(); //建立一个图像对象 var AllImgExt=".jpg|.jpeg|.gif|.bmp|.png|"//全部图片格式类型 var FileObj,ImgFileSize,ImgWidth,ImgHeight,FileExt,ErrMsg,FileMsg,HasCheked,IsImg//全局变量 图片相关属性 //以下为限制变量 var AllowExt=".jpg|.gif|.doc|.txt|&q

JS 页面计时器示例代码_javascript技巧

复制代码 代码如下: <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <script type="text/javascript"> var c=0 var t function timedCount() { document.getElementById('txt').value

JS匀速运动演示示例代码_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