JavaScript拖拽4——获得元素的位置
摘要：在第一节我们实现了基本的拖拽效果的时候，window.onload事件的响应函数定义如下： window.onload = function(){test = document.getElementById("test");test.onmousedown = down;test.onmousemove = move;document.onmouse
在第一节我们实现了基本的拖拽效果的时候，window.onload事件的响应函数定义如下：
window.onload = function(){
test = document.getElementById("test");
test.onmousedown = down;
test.onmousemove = move;
document.onmouseup = up;
test.style.position = "relative";
test.style.top = "0px";
test.style.left = "0px";
}
注意重点标出的三行代码，我们给元素设置了relative的position属性，这是由于元素只有定义了position属性，它的top和left属性才会有效，才能进一步地制作拖拽的效果。因此给元素假定定位为relative实在是迫于无奈，只能牺牲一些灵活性(当然也可以指定为absolute，要根据实际情况)。
之后我们又设定元素的top和left属性都为0px，这是为了方便后面的代码获得这两个CSS属性，简化了代码。但是这同时给使用这段代码的文档提了一个要求——要拖拽的元素必须设置top和left属性为0。这显然是一个不太合理的要求。
解决问题
我们在上一个例子中已经看到如何跨浏览器地利用JavaScript获得元素的CSS属性了。现在就来稍稍修改上一个例子中的函数来，让它服务于我们的拖拽代码：
<script type="text/javascript">
……
function dragInit(node){
if(node.className == "drag"){
……
//仍然要求元素是relative定位
node.style.position = "relative";
node.dragging = false;
}
var children = node.childNodes;
for(var i = 0;i < children.length; i++){
dragInit(children[i]);
}
}
window.onload = function(){
dragInit(document);
document.onmouseup = docUp;
}
function down(event)
{
event = event || window.event;
dragElement = this;
mouseX = parseInt(event.clientX);
mouseY = parseInt(event.clientY);
objY = parseInt(getNodeStyle(dragElement,"top"));
objX = parseInt(getNodeStyle(dragElement,"left"));
//IE不返回未设置的CSS属性
if(!objY)objY=0;
if(!objX)objX=0;
this.style.zIndex = max++;
}
……
function getNodeStyle(node,styleName){
var realStyle = null;
if(node.currentStyle){
realStyle = node.currentStyle[styleNmae];
}else if(window.getComputedStyle){
realStyle = window.getComputedStyle(node,null)[styleName];
}
return realStyle;
}
可以看到，我们使用getNodeStyle函数来获得元素的CSS属性值，这样我们的代码就可以适用于事先设置了top和left定位值的元素了。我做了一个测试页面，给两个可拖拽的div分别设置了如下的CSS规则：
<style type="text/css">
.drag{border:1px solid; width:400px; background:#CCCCCC;}
#test1{ top:20px;}
#test2{ left:40px;}
</style>
演示:
