javascript drag类操作多个对象时出错

自己写的一个drag类,如果是一个new drag()的话,没问题.
但是如果写两个new drag..只有后面的起作用.
朋友们知道为什么吗
<!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>drag类</title>
</head><body>
<style>
#pop{width:400px;background-color:#CCCCCC; border:1px solid #000;}
#popt{border:1px solid #000; border-left:none; border-right:none; cursor:move}
#btnclost{cursor:hand;float:right}
#popm{height:300px;}
#ddd{float:left}
</style>
<div id="ddd">
 222222222222222222222222
</div><div id="pop">
 <span id="btnclost">X</span><div id="popt">标题标题标题标题标题标题</div>
    <div id="popm">
     内容内容内容内容内容内容内容内容内容内容内容内容
    </div>
</div>
<script>
function $(o){return document.getElementById(o)}$('btnclost').onclick=function(){$('pop').style.display='none';}
var drag=function(obj,handle){
with(this){
 d=0;cache={};
 no=$(obj).cloneNode(true);
 if($(obj)){
  o=$(obj);d=1;
  hd=(!$(handle)?o:$(handle));
  hd.onmousedown=function(e){
   if(!e){var e=window.event}
   x=$(obj).offsetLeft;
   y=$(obj).offsetTop;
   ow=e.clientX-x;
   oh=e.clientY-y;
   with(no.style){
    position='absolute';
    left=x+'px';
    top=y+5+'px';
    filter='Alpha(Opacity="30")';
   }
   document.body.appendChild(no);
   document.onselectstart=function(){return false}
  }
  no.onmouseup=function(e){
  if(!e){var e=window.event}
    try{
     document.body.removeChild(no);
    with($(obj).style){
     position='absolute';
     left=(e.clientX-ow)+'px';
     top=(e.clientY-oh)+'px';
    }
    }catch(err){}
    d=0;document.onselectstart=function(){return true};
    drag=null;
  }
  no.onmousemove=function(e){
   if(!e){var e=window.event}
   try{
    with(no.style){
     left=e.clientX-ow+'px';
     top=e.clientY-oh+'px';
    }
   }catch(err){}
  }
 }
}}
new drag('ddd');//这个没起作用
new drag('pop');//只有这个起作用
</script>
</body>
</html>

解决方案 »

  1.   

    var obj = {};with (obj) {
    a = 1;
    b = 2;
    }alert(obj.a);你认为with中赋值了obj.a，会输出1？自己测试一下吧。
      

  2.   

    嗯.with写法有问题,返回undefine
    但是如果我这么写的话,好像正常了.var obj = function(){
    this.a=0;
    this.b=0;
    with(this){
    a = 1;
    b = 2;
    }
    }var n=new obj();
    alert(n.b);结果输出2
      

  3.   

     this.a=0;
        this.b=0;
    这样写才是对象里的属性.
    如果写a,b这是定义全局变量了.不是对象里的属性了.
      

  4.   

    #1正解Try...
    <!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>drag类</title>
    </head><body>
    <style>
    #pop{width:400px;background-color:#CCCCCC; border:1px solid #000;}
    #popt{border:1px solid #000; border-left:none; border-right:none; cursor:move}
    #btnclost{cursor:hand;float:right}
    #popm{height:300px;}
    #ddd{float:left}
    </style>
    <div id="ddd" style="width:200px;height:200px;border:1px solid;background-color:#CCCCCC;cursor:move">
     222222222222222222222222
    </div><div id="pop" >
     <span id="btnclost">X</span><div id="popt">标题标题标题标题标题标题</div>
        <div id="popm">
         内容内容内容内容内容内容内容内容内容内容内容内容
        </div>
    </div>
    <script>
    function $(o){return document.getElementById(o)}//$('btnclost').onclick=function(){$('pop').style.display='none';}
    var drag=function(obj,handle){ this.d=0;this.cache={};
     this.no=$(obj).cloneNode(true);
     if($(obj)){
      this.o=$(obj);this.d=1;
      this.hd=(!$(handle)?this.o:$(handle));
      this.hd.onmousedown=(function(e,no){
      return function(e){
       if(!e){var e=window.event}
       x=$(obj).offsetLeft;
       y=$(obj).offsetTop;
       ow=e.clientX-x;
       oh=e.clientY-y;
       with(no.style){
        position='absolute';
        left=x+'px';
        top=y+5+'px';
        filter='Alpha(Opacity="30")';
       }
       document.body.appendChild(no);
       document.onselectstart=function(){return false}
      }
      }
      )(window.event,this.no)
      this.no.onmouseup=function(e){
     
      if(!e){var e=window.event}
        try{
         document.body.removeChild(this);
        with($(obj).style){
         position='absolute';
         left=(e.clientX-ow)+'px';
         top=(e.clientY-oh)+'px';
        }
        }catch(err){}
        d=0;document.onselectstart=function(){return true};
        drag=null;
      }
      
      this.no.onmousemove=function(e){
       if(!e){var e=window.event}
       try{
        with(this.style){
         left=e.clientX-ow+'px';
         top=e.clientY-oh+'px';
        }
       }catch(err){}
      }}}
    new drag('ddd');//这个没起作用
    new drag('pop','popt');//只有这个起作用
    </script>
    </body>
    </html>
      

  5.   

    http://blog.csdn.net/xiaofan_sap/archive/2009/10/15/4677394.aspx
    看看这个吧
      

  6.   

    谢谢各位,特别四楼的sundotLei朋友,
    看来我还得继续学习哈.with和this的用法还不怎么行.