javascript 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>