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

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

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

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

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

   targetLayer = ele;

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

   oldX = event.clientX - targetLayer.style.posLeft;
   oldY = event.clientY - targetLayer.style.posTop;
}

function dragIt() {
   if(! targetLayer) return; // ¼±ÅÃµÈ ·¹À̾ ¾øÀ¸¸é Á¾·á.

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

   targetLayer.style.posLeft = newX;
   targetLayer.style.posTop  = newY;
}

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;
}