拖放效果系列 四

在第一节我们实现了基本的拖拽效果的时候，window.onload事件的响应函数定义如下：

Javascript代码

1. window.onload = function(){  
2.     test = document.getElementById("test");  
3.     test.onmousedown = down;  
4.     test.onmousemove = move;  
5.     document.onmouseup = up;  
6.         //下面三行被标出。本页中颜色无法显示  
7.     test.style.position = "relative";  
8.     test.style.top = "0px";  
9.     test.style.left = "0px";  
10. }  

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属性了。现在就来稍稍修改上一个例子中的函数来，让它服务于我们的拖拽代码：

Javascript代码

1. <script type="text/javascript">  
2. ……  
3. function dragInit(node){  
4.     if(node.className == "drag"){   
5.         ……  
6.         //仍然要求元素是relative定位  
7.         node.style.position = "relative";  
8.         node.dragging = false;  
9.     }  
10.     var children = node.childNodes;  
11.     for(var i = 0;i < children.length; i++){  
12.         dragInit(children[i]);  
13.     }  
14. }  
15. window.onload = function(){  
16.     dragInit(document);  
17.     document.onmouseup = docUp;  
18. }  
19. function down(event)  
20. {     
21.     event = event || window.event;   
22.     dragElement = this;  
23.     mouseX = parseInt(event.clientX);  
24.     mouseY = parseInt(event.clientY);  
25.     objY = parseInt(getNodeStyle(dragElement,"top"));  
26.     objX = parseInt(getNodeStyle(dragElement,"left"));  
27.     //IE不返回未设置的CSS属性  
28.     if(!objY)objY=0;  
29.     if(!objX)objX=0;  
30.     this.style.zIndex = max++;  
31. }  
32. ……  
33. function getNodeStyle(node,styleName){  
34.     var realStyle = null;  
35.     if(node.currentStyle){  
36.         realStyle = node.currentStyle[styleNmae];  
37.     }else if(window.getComputedStyle){  
38.         realStyle = window.getComputedStyle(node,null)[styleName];  
39.     }  
40.     return realStyle;  
41. }  

<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规则：

Javascript代码

1. <style type="text/css">  
2. .drag{border:1px solid; width:400px; background:#CCCCCC;}  
3. #test1{ top:20px;}  
4. #test2{ left:40px;}  
5. </style>  

<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——修复错误