Есть код для перемещения рисунков на странице:

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>  <title>Drag'n'Drop</title>  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />  <script type="text/javascript">   var current_obj;   var activate=false;   function f_activate(obj)   {      activate=!activate;      current_obj=obj;   }   function grab()   {     var imgW=null;     var imgH=null;     if(activate)  {       imgW=current_obj.width;       imgH=current_obj.height;       current_obj.style.left=event.x-imgW/2;       current_obj.style.top=event.y-imgH/2;       window.status="X:"+event.x+" Y:"+event.y;     }   }  </script> </head> <body onMouseMove="grab();">  <h1 style="font-family: Verdana, sans-serif; text-align: center;">Drag'n'Drop</h1>  <img src="./bear.jpg" width="200px" height="220px" id="my_img" onClick="f_activate(this);" style="z-index: 10; position: absolute; top: 10px; left: 10px;" />  <img src="./girl1.jpg" width="200px" height="220px" id="girl_1" onClick="f_activate(this);" style="z-index: 20; position: absolute; top: 20px; left: 20px;" />  <img src="./girl2.jpg" width="200px" height="220px" id="girl_2" onClick="f_activate(this);" style="z-index: 30; position: absolute; top: 40px; left: 40px;" />   </body> </html>

Я хочу, чтобы, когда я беру какой-нибудь элемент, он был превыше всех, но когда его оставляю и беру дргой, то другой уже был превыше все. Пробовал через изменение свойства z-index, но ничего толкового не получилось. Подскажите, пожалуйста, логику такого вот перемещения.