Javascript拖拽系列文章2之offsetLeft.offsetTop.offsetWidth.offsetHeight属性第1/2页

2013-11-12  来源:本站原创  分类:javascript技巧  人气:3 

Javascript拖拽用到的一些关于位置定位的一些参数

在阅读本文之前,请先看一看第一篇文章Javascript拖拽系列文章1之offsetParent属性,因为循序渐进是一个很好的习惯,值得提倡。
好了,看看我们今天的内容吧。
首先让我们先看一看element.offsetLeft属性。
支持的浏览器:Internet Explorer 4.0+,Mozilla 1.0+,Netscape 6.0+,Opera 7.0+,Safari 1.0+
定义:返回一个像素数值,它表示当前元素的左边缘到它的offsetParent属性返回的对象左边缘的偏移量。
句法:
leftDis = element.offsetLeft
offsetLeft属性在Internet Explorer中的实现存在Bug,无论当前元素的offsetParent属性取值如何,它总是以Body元素为参照物来计算offsetLeft。幸运的是,这个Bug在Intern Explorer 8 Beta 1中已经修复。仍然需要注意,IE会从Body元素的Left-Border为标准开始计算OffsetLeft,而其他的浏览器将从Left-Margin开始计算。
测试代码1:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
border:1px solid red;
margin-left:0px;
}
#parent{
position:relative;
left:25px;
top:0px;
border:1px solid black;

}
</style>
<script type="text/javascript" language="JavaScript">
function offset_init(){
var pElement = document.getElementById("sonObj");
parentObj = pElement.offsetParent;
var ioffsetLeft=pElement.offsetLeft;

alert(parentObj.tagName);
alert(ioffsetLeft);
}
</script>
</head>
<body onload="offset_init()">
<div id="parent">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
<span id="sonObj">测试OffsetParent属性</span>
</div>
</body>
</html>

在IE中,运行这段代码后,会依次弹出两个窗口,分别显示“DIV”、“437”,分别表示offsetParent和offsetLeft。在下图中,红色边框代表Body元素,黑色边框代表Div元素。从而证明即使在IE中,offsetParent不是Body元素,offsetLeft的计算也以Body元素为标准。

Javascript拖拽系列文章2之offsetLeft.offsetTop.offsetWidth.offsetHeight属性第1/2页

图一:在IE7中的结果

在IE 8 Beta 1中这Bug已经被修复,将分别返回“DIV”,“411”。已经和其他浏览器一样符合了标准。

当前1/2页 12下一页

相关文章
  • Javascript拖拽系列文章2之offsetLeft.offsetTop.offsetWidth.offsetHeight属性第1/2页 2013-11-12

    Javascript拖拽用到的一些关于位置定位的一些参数 在阅读本文之前,请先看一看第一篇文章Javascript拖拽系列文章1之offsetParent属性,因为循序渐进是一个很好的习惯,值得提倡. 好了,看看我们今天的内容吧. 首先让我们先看一看element.offsetLeft属性. 支持的浏览器:Internet Explorer 4.0+,Mozilla 1.0+,Netscape 6.0+,Opera 7.0+,Safari 1.0+ 定义:返回一个像素数值,它表示当前元素的左边缘

  • Javascript拖拽系列文章1之offsetParent属性第1/3页 2013-12-26

    这个系列文章主要是讲述实现Javascript拖拽功能的基础知识,并将在最后给出一个完整的示例.适合对拖拽完全不懂的人阅读 第一篇就先讲讲Javascript中的offsetParent属性吧. 支持的浏览器:Internet Explorer 4.0+,Mozilla 1.0+,Netscape 6.0+,Opera 7.0+,Safari 1.0+ element.offsetParent Summary offsetParent returns a reference to the obj

  • Javascript拖拽&拖放系列文章3之细说事件对象第1/4页 2014-12-28

    Javascript中的事件对象其实和.NET中继承自EventArgs类的派生类类似,用来给事件处理程序传递状态信息,从而进行相应的操作.这一篇文章将讲述Javascript事件对象中和实现拖拽功能相关的几个属性,并在最后将IE事件模型和标准DOM事件模型的差异封装到一个类中,从而适应所有的浏览器. 在阅读本文前,可以先阅读<Javascript拖拽&拖放系列文章2之offsetLeft.offsetTop.offsetWidth.offsetHeight属性>这篇文章,以理清上下文

  • Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理) 2014-04-15

    这篇文章主要介绍了Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理),需要的朋友可以参考下 拖拽的原理: 其实就是鼠标与左上角的距离保持不变.我们来看下图, 这红点就是鼠标. 拖拽拖拽实际上来说就是通过鼠标的位置来计算物体的位置,就是这么简单,就是这么任性. 那这个距离怎么求呢?? 鼠标的位置-物体位置的差值就是那个距离 是吧.那这个斜线就是横线和竖线组成的. 我们距离看下程序怎么做. <div id="div1"> </div> 实际上他改的

  • Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理) 2014-05-27

    这篇文章主要介绍了Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理),需要的朋友可以参考下 今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能 上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级.原理和之前的一样,简单吧. html代码: <div id="div2"> <div id="div1"> </div> </div> cs

  • Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理) 2014-06-17

    这篇文章主要介绍了Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理),需要的朋友可以参考下 今天我们就来解决上一次拖拽雏形中的一些问题.下面看看有哪些问题? 附上上期的Javascript代码,方便大家查看问题. <script type="text/javascript"> window.onload = function() { var oDiv = document.getElementById("div1"); va

  • Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理) 2014-12-11

    这篇文章主要介绍了Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理),需要的朋友可以参考下 我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来也不方便.顺便提一下,我们之前加了一个return false;帮我们解决了很多问题,如果去掉这个的话,chrome也会出现一样的问题.那么也就是说这个return false;

  • javascript拖拽上传类库DropzoneJS使用方法 2013-12-07

    这篇文章主要介绍了javascript拖拽上传类库DropzoneJS使用方法,大家参考使用吧 用法 1. add js and css style <link href="~/Dropzone/css/basic.css" rel="stylesheet" /> <link href="~/Dropzone/css/dropzone.css" rel="stylesheet" /> <scrip

  • JavaScript拖拽效果示例网页解决快速拖拽的问题 2014-06-19

    JavaScript拖拽文章的配套示例网页.本例解决了快速拖拽的时候元素停止移动的问题,需要的朋友可以参考下 JavaScript拖拽示例网页--解决快速拖拽的问题 我是拖拽示例DIV1. 可以试验一下效果. 我是拖拽示例DIV2. [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JavaScript 拖拽翻页效果代码 2013-11-22

    拖动翻页代码,很多人都想拥有这样一个功能,现在于JavaScript配合CSS终于实现了,个人感觉真的很不错,按住鼠标左键向某一方向拖动即可完成分页动作,符合WEB标准,兼容多浏览器. 拖拽翻页效果JavaScript特效-demo by http://www.jb51.net 09-11-25RSA文件加密原理及代码实现 09-11-25C#软件后门程序代码 09-11-25项目管理软件PHP版 09-11-25手牵手 09-11-25初恋的少年家 09-11-25啊!停不住的爱人 09-11

  • EasyUI层与拖拽系列控件 2010-06-08

    基于EasyUI开发的可扩展附加组件:拖拽类EasyDragDrop,弹出层基类EasyLayer,遮罩类EasyMask,Popup类 EasyUI拖拽类EasyDragDrop.js new easyDragDrop(dragArea,moveArea,aMatrix,dashedMove) 拖拽类构造函数 参数:可拖动元素,需要移动的元素,可拖动范围[上,右,下,左],是否虚框拖拽 easyDragDrop属性: dragArea 拖拽对象 moveArea 移动对象 aMatrix 可移

  • javascript支持firefox,ie7页面布局拖拽效果代码 2014-09-18

    javascript 拖拽 页面拖拽 拖拽效果的页面 超级拖拽 javascript支持firefox,ie7页面布局拖拽效果代码 鼠标拖拽 javascript 拖拽JavaScript Google IG Drag Demo,非常棒的拖动,准备用于F2Blog新Theme的后台模块设置,之间的拖 动 拖拽效果的页面效果演示地址:http://img.jb51.net/online/tuozhuai/google_drag.htm 加强版效果演示地址:http://img.jb51.net/o

  • 怎么用javascript进行拖拽2 2014-03-01

    Demo - Drag any of the images [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 你会注意到这个代码几乎是前面的全集,将前面的合在一起就实现了拖拽效果了. 当我们点击一个item时,我们就获取了很多变量,如鼠标位置,鼠标位置自然就包含了那个item的坐标信息了.如果我们点击了一个20*20px图像的正中间,那么鼠标的相对坐标为{x:10,y:10}.当我们点击这个图像的左上角那么鼠标的相对坐标为{x:0,y:0}.当我们点击时,我们用这个方法取得一些鼠标与图

  • JavaScript实现文字与图片拖拽效果的方法 2014-04-22

    这篇文章主要介绍了JavaScript实现文字与图片拖拽效果的方法,涉及javascript操作文字与图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JavaScript实现文字与图片拖拽效果的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>JavaScript实现文字与图片的拖拽效果</title> <style type="text/css"> *{paddi

  • 原生javascript实现DIV拖拽并计算重复面积 2014-08-21

    这篇文章主要介绍了使用原生javascript实现DIV拖拽并计算重复面积的方法及示例代码分享,效果十分漂亮,需要的朋友可以参考下 <!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/19

  • javascript完美拖拽的实现方法 2015-03-08

    这篇文章介绍了javascript完美拖拽的实现方法,有需要的朋友可以参考一下 HTML代码: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" />

  • javascript实现表格排序 编辑 拖拽 缩放 2015-04-09

    这篇文章主要介绍了javascript实现表格排序 编辑 拖拽 缩放的方法,效果非常不错,只是兼容性还有些问题,有待优化. 简单表格排序 可以双击编辑 自定义编辑后的 规则 可拖动列进行列替换 可推动边框进行列宽度的缩放 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&

  • 怎么用javascript进行拖拽第1/2页 2013-12-03

    本文译自:http://www.webreference.com/programming/javascript/mk/column2/index.html 所有版权归原文所有 Javascript的特点是dom的处理与网页效果,大多数情况我们只用到了这个语言的最简单的功能,比如制作图片轮播/网页的tab等等,这篇文章将向你展示如何在自己的网页上制作拖拽. 有很多理由让你的网站加入拖拽功能,最简单的一个是数据重组.例如:你有一个序列的内容让用户排序,用户需要给每个条目进行输入或者用select选择

  • javascript实现漂亮的拖动层,窗口拖拽特效 2014-04-04

    一个可关闭.可随意拖动位置的网页弹出层代码,美化的相当漂亮,简洁实用,还可拖动改变大小,通过八个方向改变大小,学习这类特效编写的网页设计者可参阅一下 javascript实现漂亮的拖动层,窗口拖拽特效 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ht

  • JavaScript实现拖拽网页内元素的方法 2014-11-20

    这篇文章主要介绍了JavaScript实现拖拽网页内元素的方法,以注释形式较为详细的分析了javascript事件监听.元素定位的相关技巧,并配有详细的注释以便于理解,需要的朋友可以参考下 本文实例讲述了JavaScript实现拖拽网页内元素的方法.分享给大家供大家参考.具体如下: 这段代码详细讲述了JS拖拽的原理和方法,值得学习和借鉴. /** * 跨平台的事件监听函数 * @param {Node} node 需要监听事件的DOM节点 * @param {String} eventType