마우스로 개체 이동 및 크기 변화, 자동 크기 변화

마우스로 개체 이동 및 가로 크기 변화(좌우 개체)에다가

지정된 크기까지 줄여주는 함수를 추가했다.

사용법은 아래와 같다.

e_resize('rightview','leftview','right',400)

function e_resize(leftobjid,rightobjid,direction,limit)

수정 : 가속도 추가 및 함수 간결화

가속도 추가 - 처음엔 빠르다가 나중엔 느림

함수 간결화 - 입력 값을 6개에서 4개로 줄임

                    입력 값 감소로 인한 오류 발생 -> clreaTimeout 추가

var move=false

var x=0,y=0

function movespan(e){

  if(move && movingspanobj!=null){

    if(e){

      //불여우용

      x=e.pageX

      y=e.pageY

    }

    else{

      //ie용

      x=window.event.clientX

      y=window.event.clientY

    }

    try{

      document.selection.empty()

    }

    catch(e){

      window.getSelection().removeAllRanges();

    }

    //세로 이동

    movingspanobj.style.top=y-distance_y

    //movingspanobj.style.top=y-20

    //가로 이동

    movingspanobj.style.left=x-distance_x

    //movingspanobj.style.left=((x-movingspanobj.offsetWidth/2)-150)

  }

}

function e_resizespan(e){

  if(move && movingspanobj!=null){

    if(e){

      //불여우용

      x=e.pageX

    }

    else{

      //ie용

      x=window.event.clientX

    }

    try{

      document.selection.empty()

    }

    catch(e){

      window.getSelection().removeAllRanges();

    }

    //가로 이동

    movingspanobj.style.left=x-distance_x

    //movingspanobj.style.left=((x-movingspanobj.offsetWidth/2)-150)

    var templeftwidth=leftspanwidth-(first_x-x)

    var temprightwidth=rightspanwidth+(first_x-x)

    //너비 변화

    leftspanobj.style.width=templeftwidth

    rightspanobj.style.width=temprightwidth

    //내부 span 크기 조절

    var objs=leftspanobj.getElementsByTagName('span')

    for(var i=objs.length;i--;){

        objs[i].style.width=templeftwidth

    }

    objs=rightspanobj.getElementsByTagName('span')

    for(var i=objs.length;i--;){

        objs[i].style.width=temprightwidth

    }

    //내부 img 크기 조절

    objs=leftspanobj.getElementsByTagName('img')

    for(var i=objs.length;i--;){

      objs[i].style.width=templeftwidth

    }

    objs=rightspanobj.getElementsByTagName('img')

    for(var i=objs.length;i--;){

      objs[i].style.width=temprightwidth

    }

  }

}

var distance_x,distance_y,movingspanobj,leftspanobj,rightspanobj,leftspanwidth,rightspanwidth,first_x

var e_resize_timeout

document.onmousedown=new Function('move=true')

document.onmouseup=new Function('move=false;movingspanobj=null')

function movethis(spanobj){

  if(window.event){

    //ie용

    x=window.event.clientX

    y=window.event.clientY

  }

  else{

    //불여우용

    x=e.pageX

    y=e.pageY

  }

  movingspanobj=spanobj

  distance_x=x-movingspanobj.offsetLeft

  distance_y=y-movingspanobj.offsetTop

  movingspanobj.onmousemove=movespan

}

function e_resizethis(spanobj,leftobjid,rightobjid){

  if(window.event){

    //ie용

    x=window.event.clientX

  }

  else{

    //불여우용

    x=e.pageX

  }

  first_x=x

  movingspanobj=spanobj

  leftspanobj=document.getElementById(leftobjid)

  rightspanobj=document.getElementById(rightobjid)

  distance_x=x-movingspanobj.offsetLeft

  leftspanwidth=leftspanobj.offsetWidth

  rightspanwidth=rightspanobj.offsetWidth

  movingspanobj.onmousemove=e_resizespan

}

function e_resize(leftobjid,rightobjid,direction,limit){

  clearTimeout(e_resize_timeout)

  var movesize=0

  leftspanobj=document.getElementById(leftobjid)

  rightspanobj=document.getElementById(rightobjid)

  if((leftspanobj.offsetWidth>limit && direction=='left') || (rightspanobj.offsetWidth>limit && direction=='right')){

    if(direction=='left'){

      movesize=Math.ceil(Math.abs(leftspanobj.offsetWidth-limit)/20)

      leftspanobj.style.width=leftspanobj.offsetWidth-movesize

      rightspanobj.style.width=rightspanobj.offsetWidth+movesize

    }

    else{

      movesize=Math.ceil(Math.abs(rightspanobj.offsetWidth-limit)/20)

      leftspanobj.style.width=leftspanobj.offsetWidth+movesize

      rightspanobj.style.width=rightspanobj.offsetWidth-movesize

    }

    e_resize_timeout=setTimeout('e_resize("'+leftobjid+'","'+rightobjid+'","'+direction+'",'+limit+')',10)

  }

}