problem with drag and drop

hello,
I have one drag and drop image and one drag and drop box.
if i load the page and drag and drop first the box that's not a problem.
but if i drag and drop the image then i can't drag and drop the box again, why?



this is the code that i use:
---------------------------------------

<script language="javascript">
var DragIcons = {
obj : null,
init : function(o, Tname, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper) {
o.onmousedown= DragIcons.start;
o.hmode= bSwapHorzRef ? false : true ;
o.vmode= bSwapVertRef ? false : true ;
o.root = oRoot && oRoot != null ? oRoot : o ;
if (o.hmode  && isNaN(parseInt(o.root.style.left  ))) o.root.style.left   = "0px";
if (o.vmode  && isNaN(parseInt(o.root.style.top   ))) o.root.style.top    = "0px";
if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right  = "0px";
if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";
o.minX= typeof minX != 'undefined' ? minX : null;
o.minY= typeof minY != 'undefined' ? minY : null;
o.maxX= typeof maxX != 'undefined' ? maxX : null;
o.maxY= typeof maxY != 'undefined' ? maxY : null;
o.xMapper = fXMapper ? fXMapper : null;
o.yMapper = fYMapper ? fYMapper : null;
o.root.onDragStart= new Function();
o.root.onDragEnd= new Function();
o.root.onDrag= new Function();
},
start : function(e) {
var o = DragIcons.obj = this;
e = DragIcons.fixE(e);
var yPos = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
var xPos = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
o.root.onDragStart(xPos, yPos);
o.lastMouseX= e.clientX;
o.lastMouseY= e.clientY;
if (o.hmode) {
if (o.minX != null)o.minMouseX= e.clientX - xPos + o.minX;
if (o.maxX != null)o.maxMouseX= o.minMouseX + o.maxX - o.minX;
} else {
if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + xPos;
if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + xPos;
}
if (o.vmode) {
if (o.minY != null)o.minMouseY= e.clientY - yPos + o.minY;
if (o.maxY != null)o.maxMouseY= o.minMouseY + o.maxY - o.minY;
} else {
if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + yPos;
if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + yPos;
}
document.onmousemove= DragIcons.drag;
document.onmouseup= DragIcons.end;
return false;
},
drag : function(e) {
e = DragIcons.fixE(e);
var o = DragIcons.obj;
var eyl1= e.clientY;
var exl1= e.clientX;
var yf2 = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
var xf2 = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
var nx, ny;
if (o.minX != null) exl1 = o.hmode ? Math.max(exl1, o.minMouseX) : Math.min(exl1, o.maxMouseX);
if (o.maxX != null) exl1 = o.hmode ? Math.min(exl1, o.maxMouseX) : Math.max(exl1, o.minMouseX);
if (o.minY != null) eyl1 = o.vmode ? Math.max(eyl1, o.minMouseY) : Math.min(eyl1, o.maxMouseY);
if (o.maxY != null) eyl1 = o.vmode ? Math.min(eyl1, o.maxMouseY) : Math.max(eyl1, o.minMouseY);
nx = xf2 + ((exl1 - o.lastMouseX) * (o.hmode ? 1 : -1));
ny = yf2 + ((eyl1 - o.lastMouseY) * (o.vmode ? 1 : -1));
if (o.xMapper)nx = o.xMapper(yf2)
else if (o.yMapper)ny = o.yMapper(xf2)
DragIcons.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
DragIcons.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
DragIcons.obj.lastMouseX= exl1;
DragIcons.obj.lastMouseY= eyl1;
DragIcons.obj.root.onDrag(nx, ny);
return false;
},
end : function()
{
document.onmousemove = null;
document.onmouseup   = null;
DragIcons.obj.root.onDragEnd(parseInt(DragIcons.obj.root.style[DragIcons.obj.hmode ? "left" : "right"]),
parseInt(DragIcons.obj.root.style[DragIcons.obj.vmode ? "top" : "bottom"]));
DragIcons.obj = null;
},
fixE : function(e)
{
if (typeof e == 'undefined') e = window.event;
if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
return e;
}
};

var oldWidth;
var oldHeight;
var w3c=(document.getElementById)? true: false;
var ie5=(w3c && document.all)? true : false;
var ns6=(w3c && (navigator.appName=="Netscape"))? true: false;
currIDb=null; fxoff=0; fyoff=0;
currRS=null; rsfxoff=0; rsfyoff=0;
oldac=null; newac=null; zdx=1; mx=0; my=0;

var idlist=new Array();
idlist.btns=new Array();
idlist.btns[0]=new Image(); idlist.btns[0].src="images/min.gif";
idlist.btns[1]=new Image(); idlist.btns[1].src="images/max.gif";
idlist.btns[2]=new Image(); idlist.btns[2].src="images/close.gif";
idlist.btns[3]=new Image(); idlist.btns[3].src="images/resize.gif";

function truebody(){
return (document.compatMode!="BackCompat")? document.documentElement : document.body
}

function hidebox(id){
if(w3c){
document.getElementById(id+'_b').style.display='none';
}}

function showbox(id){
if(w3c){
var bx=document.getElementById(id+'_b').style;
var sh=document.getElementById(id+'_s').style;
bx.display='block';
sh.display='block';
sh.zIndex=++zdx;
bx.zIndex=++zdx;
}}
function minimize(){ }
function restore(){ }
function ns6bugfix(){
self.resizeBy(0,1);
self.resizeBy(0,-1);
}

function trackmouse(evt){
mx1=(ie5)?event.clientX+truebody().scrollLeft:evt.pageX;
my1=(ie5)?event.clientY+truebody().scrollTop:evt.pageY;
if(!ns6)movepopup();
if((currIDb!=null)||(currRS!=null))return false;
}

function movepopup(){
if((currIDb!=null)&&w3c){
var xf1=mx1+fxoff;
var yf1=my1+fyoff;
currIDb.style.left=xf1+'px';
currIDb.style.top=yf1+'px';
}
if((currRS!=null)&&w3c){
var rx1=mx1+rsfxoff;
var ry1=my1+rsfyoff;
var c=currRS;
c.style.left=Math.max(rx1,((ie5)?88:92))+'px';
c.style.top=Math.max(ry1,((ie5)?68:72))+'px';
c.FL[0].style.width=Math.max(rx1+((ie5)?12:8),100)+'px';
c.FL[0].style.height=Math.max(ry1+((ie5)?12:8),80)+'px';
c.FL[1].style.width=Math.max(rx1+((ie5)?4:3),((ns6)?95:92))+'px';
c.FL[5].style.left=parseInt(c.FL[1].style.width)-48+'px';
c.FL[2].style.width=Math.max(rx1-((ie5)?-5:5),((ie5)?92:87))+'px';
c.FL[2].style.height=Math.max(ry1-((ie5)?24:28),44)+'px';
c.FL[10]=parseInt(c.FL[0].style.height);
}}

function startRS(evt){
var ex1=(ie5)?event.clientX+truebody().scrollLeft:evt.pageX;
var ey1=(ie5)?event.clientY+truebody().scrollTop:evt.pageY;
rsfxoff=parseInt(this.style.left)-ex1;
rsfyoff=parseInt(this.style.top)-ey1;
currRS=this;
if(ns6)this.FL[2].style.overflow='hidden';
return false;
}

function stopdrag(){
currIDb=null;
ns6bugfix();
}
function grab_id(evt){
var ex=(ie5)?event.clientX+truebody().scrollLeft:evt.pageX;
var ey=(ie5)?event.clientY+truebody().scrollTop:evt.pageY;
fxoff=parseInt(this.FL[0].style.left)-ex;
fyoff=parseInt(this.FL[0].style.top)-ey;
currIDb=this.FL[0];
currFL=this.FL[3];
return false;
}

function subBox(x,y,w,h,bgc,id){
var v=document.createElement('div');
v.setAttribute('id',id);
v.style.position='absolute';
v.style.left=x+'px';
v.style.top=y+'px';
v.style.width=w+'px';
v.style.height=h+'px';
v.style.backgroundColor=bgc;
v.style.visibility='visible';
v.style.padding='0px 0px 0px 0px';
return v;
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = ""
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function popUp(x,y,w,h,cid,text,bgcolor,textcolor,fontstyleset,title,titlecolor,titletextcolor,bordercolor,scrollcolor,shadowcolor,showonstart,isdrag,isresize,oldOK,POPPERSESSION){
var proceedtopop=false
if (POPPERSESSION){
if (get_cookie(cid)==""){
proceedtopop=true
document.cookie=cid+"=yes"
}
}
else
proceedtopop=true
if (proceedtopop){
if(w3c){
var tw, th;
w=Math.max(w,100);
h=Math.max(h,80);
var rdiv=new subBox(w-((ie5)?12:8),h-((ie5)?12:8),7,7,'',cid+'_rs');
if(isresize){
rdiv.innerHTML='<img src="images/resize.gif" width="7" height="7" title="uit/in-trekken">';
rdiv.style.cursor='nw-resize';
}
tw=(ie5)?w:w+4;
th=(ie5)?h:h+6;
var tw,th;
var outerdiv=new subBox(x,y,w,h,bordercolor,cid+'_b');
outerdiv.style.borderStyle="outset";
outerdiv.style.borderWidth="2px";
outerdiv.style.borderColor=bordercolor;
outerdiv.style.zIndex=++zdx;
tw=(ie5)?w-8:w-5;
th=(ie5)?h+4:h-4;
var titlebar=new subBox(2,2,tw,20,titlecolor,cid+'_t');
titlebar.style.overflow="hidden";
titlebar.style.cursor="default";
titlebar.innerHTML='<span style="position:absolute; left:3px; top:1px; font:bold 10pt sans-serif; color:'+titletextcolor+'; height:18px; overflow:hidden; clip-height:16px;">'+title+'</span><span id="'+cid+'_btt" style="position:absolute; width:48px; height:16px; left:'+(tw-48)+'px; top:2px;"><img src="images/min.gif" width="16" height="16" id="'+cid+'_min" title="Minimaliseren"><img src="images/max.gif" width="16" height="16"  id="'+cid+'_max" title="Maximaliseren"><img src="images/close.gif" width="16" height="16" id="'+cid+'_cls" title="Sluiten"></span>';
tw=(ie5)?w-7:w-13;
th=(ie5)?h-36:h-36;
var content=new subBox(2,24,tw,th,bgcolor,cid+'_c');
content.style.borderColor=bordercolor;
content.style.borderStyle="inset";
content.style.borderWidth="2px";
content.style.overflow="auto";
content.style.padding="0px 0px 0px 0px";
content.style.font=fontstyleset;
content.style.color=textcolor;
content.innerHTML=text;
outerdiv.appendChild(titlebar);
outerdiv.appendChild(content);
outerdiv.appendChild(rdiv);
document.body.appendChild(outerdiv);
if(!showonstart)hidebox(cid);
var FL=new Array();
FL[0]=document.getElementById(cid+'_b');
FL[1]=document.getElementById(cid+'_t');
FL[2]=document.getElementById(cid+'_c');
FL[4]=document.getElementById(cid+'_rs');
FL[5]=document.getElementById(cid+'_btt');
FL[6]=document.getElementById(cid+'_min');
FL[7]=document.getElementById(cid+'_max');
FL[8]=document.getElementById(cid+'_cls');
FL[9]=cid;
FL[10]=h;
this.IDb=FL[0]; this.IDb.FL=FL;
this.IDt=FL[1]; this.IDt.FL=FL;
this.IDc=FL[2]; this.IDc.FL=FL;
this.IDrs=FL[4]; this.IDrs.FL=FL;
this.IDbtt=FL[5]; this.IDbtt.FL=FL;
this.IDmin=FL[6]; this.IDmin.FL=FL;
this.IDmax=FL[7]; this.IDmax.FL=FL;
this.IDcls=FL[8]; this.IDcls.FL=FL;
this.IDb.activecolor=titlecolor;
oldac=this.IDb;
this.IDcls.onclick=new Function("hidebox('"+cid+"');");
if(isresize){
this.IDmin.onclick=minimize;
this.IDmax.onclick=restore;
this.IDrs.onmousedown=startRS;
this.IDrs.onmouseup=new Function("currRS=null");
}
this.IDb.onmousedown=function(){
   if(oldac!=null){
   oldac.FL[1].style.backgroundColor=oldac.inactivecolor;
   }
   if(ns6)this.FL[2].style.overflow='auto';
   oldac=this;
   this.FL[1].style.backgroundColor=this.activecolor;
   this.style.zIndex=++zdx;
   }
if(isdrag){
this.IDt.onmousedown=grab_id;
this.IDt.onmouseup=stopdrag;
}
}else{
if(oldOK){
var ctr=new Date();
ctr=ctr.getTime();
var win=window.open("" , "abc"+ctr , "status=no,menubar=no,width="+w+",height="+h+",resizable=yes,scrollbars=yes");
var t='<html><head><title>'+title+'</title></head><body bgcolor="'+bgcolor+'">'+text+'</body></html>';
win.document.write(t);
win.document.close();
}}}}
if(ns6)setInterval('movepopup()',40);
if(w3c){
document.onmousemove=trackmouse;
document.onmouseup=new Function("currRS=null");
}
</script>

<body>

<script language="javascript">
new popUp(200, 100, 300, 175, "Div", "Hallo dit is een test", "white", "black", "bold 10pt sans-serif", "Title Bar", "navy", "white", "#dddddd", "gray", "black", true, true, true, true, false);

document.write('<img src="images/p.gif" id="TE1" style="cursor:default;position:absolute; left:20px; top:20px;">');
DragIcons.init(document.getElementById('TE1'),'TE1', null, null, null, null, null, false, false);
</script>