js拖拽实例

实现代码如下
js：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var params={
left:0,
right:0,
currentX:0,
currentY:0,
flag:false };

var getCss=function(o,key){
return o.currentStyle? o.currentStyle[key]:document.defaultView.getComputedStyle(o,false)[key];
}


var startDrag=function(bar, target){
if(getCss(target,'left')!==auto){//getCss(target,'left')!==auto)这句是什么意思啊？

params.left=getCss(target,'left');    //记录整体的这一块的位置

}

if(getCss(target,'top')!==auto){

params.top=getCss(target,'top');  //记录整体的这一块的位置

}
bar.onmousedown=function(event){
 params.flag=true; //类似的打开开关的感觉。

var e=event; //将鼠标这值给一个变量。

params.currentX=e.clientX;//记录按下时鼠标指针位置相对于窗口客户区域的 x 坐标
params.currentY=e.clientY;
              }
  
bar.onmouseup=function(event){
 params.flag=false;
 if(getCss(target,'left')!==auto){
  params.left=getCss(target,'left'); //记录下鼠标松开时的盒型的位置。
 }
   if(getCss(target,'top')!==auto){
  params.left=getCss(target,'top');
 }
 }
bar.onmouseover=function(event){
var e = event ? event: window.event;//这句什么意思啊？
                               if(params.flag){
 var  nowX=e.clientX;//记录鼠标按下时这个过程的鼠标位移,这个判断语句会让nowX到鼠标松开才不记录，所以这个值最后记录的是，松开的鼠标的值
var  nowY=e.clientY;
  var disX= e.clientX-params.currentX;
  var disY= e.clientY-params.currentY;
                                 target.style.left=parseInt(params.currentX)+disX+'px';
  target.style.top=parseInt(params.currentY)+disY+'px';    }
}
 
};
window.onload = function(){
    var oBox = document.getElementById("box");
    var oBar = document.getElementById("bar");    startDrag(oBar, oBox);}

var getCss = function(o,key){
return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];  //这里为什么改成点就不行。
//document.defaultView.getComputedStyle 这是w3c标准方法，取得元素的样式信息，因为有些样式是在外部css文件定义的，所以用element.style是取不到的 如果是IE,可以用 element.currentStyle["name"] 
};//拖拽的实现
var startDrag = function(bar, target){
if(getCss(target, "left") !== "auto"){
params.left = getCss(target, "left");
}
if(getCss(target, "top") !== "auto"){
params.top = getCss(target, "top");
}
//o是移动对象
bar.onmousedown = function(event){
params.flag = true;
if(!event){
event = window.event;
//防止IE文字选中
bar.onselectstart = function(){
return false;
}  
}
var e = event;
params.currentX = e.clientX;
params.currentY = e.clientY;
}
bar.onmouseup = function(){
params.flag = false;
if(getCss(target, "left") !== "auto"){
params.left = getCss(target, "left");
}
if(getCss(target, "top") !== "auto"){
params.top = getCss(target, "top");
}
}
document.onmousemove = function(event){//这里跟写bar.onmousemove 有什么区别呢？
var e = event ? event: window.event;
if(params.flag){
var nowX = e.clientX, nowY = e.clientY;
var disX = nowX - params.currentX, disY = nowY - params.currentY;
target.style.left = parseInt(params.left) + disX + "px";
target.style.top = parseInt(params.top) + disY + "px";
}
}
};
window.onload = function(){
    var oBox = document.getElementById("box");
    var oBar = document.getElementById("bar");    startDrag(oBar, oBox);}
</script>
<style>
#box{
position:absolute;
left:50px;
top:150px;
padding:5px;
background:#f0f3f9; font-size:12px;
-moz-box-shadow:2px 2px 4px #666666;
-webkit-box-shadow:2px 2px 4px #666666;

}
#main
{
border:1px solid #a0b3d6;
 background:white;
 }
#bar{
line-height:24px;
border-bottom:1px solid #a0b3d6;
 padding-left:5px; 
 cursor:move;
} 
 #content{
 width:420px; 
 height:250px; 
 padding:10px 5px;
             background:#F7F7F7;
 }
</style>
</head><body>
<div id="box">
    <div id="main">
        <div id="bar">拖拽</div>
        <div id="content">
            内容……
        </div>
    </div>
</div>
</body>
</html>问题如下：
1.var getCss = function(o,key){
return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
};（12行）这里 o.currentStyle[key]改成o.currentStyle.key
 getComputedStyle(o,false)[key]改成getComputedStyle(o,false).key
为什么不行啊？2. document.onmousemove = function(event)  （54行） //这里跟写document.onmousemove  跟bar.onmousemove 有什么区别呢？3. var e = event ? event: window.event;
 这句话定义是什么意思呢？是不是考虑的ff跟ie兼容性的问题？

解决方案 »

  1.   

    1. 因为key是一个变量.假设key的值是"abc",则a.key是a["key"],而a[key]是a["abc"].2. 自己改成bar试试,再打印出一些event.clientX, event.clientY的值,你就明白了.3. ?:是条件运算符..
    在这儿的作用是因为兼容性的缘故.
      

  2.   

    document.onmousemove 跟bar.onmousemove   事件源不同吧 
    var e = event ? event: window.event;  三目运算  就是为了兼容
      

  3.   

    http://www.chhblog.com/Web/DemoView.aspx?DemoID=29
      

  4.   


     if(getCss(target,'left')!==auto)
    最后还是不懂，这个句子是什么意思？
    是不是 判断拖拽物体 有没有运动。？？？
      

  5.   

    假设target的css定义是这样的:h2.pos_right
    {
    position:relative;
    left:20px;
    }getCss(target,'left')会返回"20px". left选项可以设为"auto", if(getCss(target,'left')!==auto)就是判断这一点.