JavaScript 拖放效果系列四——获得元素的位置

原文来自：http://www.cainiao8.com/web/js_examples/21_tuozhuai4.html


在第一节我们实现了基本的拖拽效果的时候，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>

点击进入测试页面。这样，我们的拖拽代码又改进了一小步。
JavaScript拖拽系列

   1. JavaScript拖拽
   2. JavaScript拖拽2——多元素、分离JS
   3. JavaScript拖拽3——解决快速拖拽的问题
   4. JavaScript拖拽4——获得元素的位置
   5. JavaScript拖拽5——性能优化
   6. JavaScript拖拽6——修复错误