JavaScript拖拽4——获得元素的位置

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

 

  1. 用javascript修改html元素的class
  2. JavaScript重定向
  3. JavaScript对象当作关联数组
  4. JavaScript弹出窗口以及窗口间的通信
  5. JavaScript显示信息实例
  6. 用JavaScript批量访问HTML元素
  7. 分离JavaScript与HTML
  8. JavaScript计算器实例
  9. JavaScript的Math对象计算器
  10. JavaScript改变HTML元素的位置
  11. JavaScript动画
  12. JavaScript动画函数
  13. JavaScript拖拽
  14. JavaScript拖拽2——多元素、分离JS
  15. JavaScript拖拽3——解决快速拖拽的问题
  16. addEventSimple函数，添加事件响应函数的方法
  17. addEventSimple观察鼠标事件
  18. JavaScript click事件深入
  19. JavaScript事件来源元素
  20. JavaScript修改与访问CSS
  21. JavaScript拖拽4——获得元素的位置
  22. JavaScript拖拽5——性能优化
  23. DOM Scripting相册
  24. DOM Scripting斑马表格
  25. DOM Scripting动画切图
  26. JavaScript颜色渐变
  27. JavaScript拖拽6——修复错误