var bln_move = false; // ¾ÆÀÌÅÛ À̵¿½Ã Ÿ ¾ÆÀÌÅÛÀÌ ¿òÁ÷ÀÌ´Â°É ¸·¾ÆÁØ´Ù.
var targetLayer; // À̵¿ÇÒ ·¹À̾î
var oldX = 0, oldY = 0; // ±âÁ¸ÁÂÇ¥
var limitX = 0, limitY = 0; // À̵¿ÇÑ°èÁ¡
var zIndex = 11;

function dragStart(e) {
   var eve = (IE)?event:e;                     // ÇöÀç À̺¥Æ®¸¦ °¡Á®¿Â´Ù.
   var ele = (IE)?event.srcElement:eve.target; // ÇöÀç À̺¥Æ®¸¦ °¡Á®¿Â´Ù.

   // »óÀ§°´Ã¼¸¦ ã´Â´Ù.
   for(i = 0; i < 10; i++) {
      if((ele.parentNode) && (ele.id.indexOf("layer") < 0)) {
         ele = ele.parentNode;
      } else {
         break;
      }
   }

   // ¼±ÅÃµÈ ·¹À̾ ¾øÀ¸¸é...
   if(ele.id.indexOf("layer") < 0) return;

   targetLayer = ele;

   // ¸¶¿ì½º ¿Ã¸®¸é ÇØ´ç ·¹À̾ ÃÖ»óÀ§·Î ¿Ã¸°´Ù.
   zIndex = zIndex + 1;
   targetLayer.style.zIndex = zIndex;

   oldX = eve.clientX - targetLayer.style.left.replace("px","");
   oldY = eve.clientY - targetLayer.style.top.replace("px","");
}

function dragIt(e) {
   var eve = (IE)?event:e;
   if(! targetLayer) return; // ¼±ÅÃµÈ ·¹À̾ ¾øÀ¸¸é Á¾·á.

   var newX = eve.clientX - oldX;
   var newY = eve.clientY - oldY;

   targetLayer.style.left = newX + "px";
   targetLayer.style.top  = newY + "px";
}

function dragEnd() {
   // µå·¡±×°¡ ³¡³ª¸é À̵¿ÇÒ ·¹À̾ ÃʱâÈ­ ÇÑ´Ù.
   targetLayer = null;
}

// ¸¶¿ì½º¸¦ ¿Ã·ÈÀ»¶§ ¾ÆÀÌÅÛ »óÅÂ
function overItem(mitem) {
   if(targetLayer) return;
   bln_move = true;
   mitem.style.cursor = "move";
}

// ¸¶¿ì½º¸¦ »¯À»¶§ ¾ÆÀÌÅÛ »óÅÂ
function outItem(mitem) {
   if(! bln_move) return;
   bln_move = false;
}

//document.onmousemove = dragIt;
//document.onmousedown = dragStart;
//document.onmouseup   = dragEnd;