拖放成效系列 四
拖放效果系列 四在第一节我们实现了基本的拖拽效果的时候，window.onload事件的响应函数定义如下： window.o
拖放效果系列 四
在第一节我们实现了基本的拖拽效果的时候，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——修复错误
