개체 이동 스크립트 기능 강화판 (개체 이동+가로 너비 변경 동시)

개체 이동(movethis) 외에 e-resizethis를 만들었다.

두 개체의 사이에 세로 막대 개체를 하나 만들어 두고 세로 막대 개체를 움직이면 좌우의 개체(minusobj,plusobj)의 가로 너비가 변하도록(이동하는만큼)하는 스크립트이다.

기존의 개체 이동 기능은 그대로 두고 함수를 추가했다.

사용 예 : 

<span id=minusspan></span>

<span style=position:absolute onmouseover=e_resizethis(this,'minusspan','plusspan')></span>

<span id=plusspan></span>

아래 스크립트는 js 파일에 넣고 쓰면 편하다.

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)

    //너비 변화

    minusspanobj.style.width=minusspanwidth-(first_x-x)

    plusspanobj.style.width=plusspanwidth+(first_x-x)

  }

}

var distance_x,distance_y,movingspanobj,minusspanobj,plusspanobj,minusspanwidth,plusspanwidth,first_x

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,minusobjid,plusobjid){

  if(window.event){

    //ie용

    x=window.event.clientX

  }

  else{

    //불여우용

    x=e.pageX

  }

  first_x=x

  movingspanobj=spanobj

  minusspanobj=document.getElementById(minusobjid)

  plusspanobj=document.getElementById(plusobjid)

  distance_x=x-movingspanobj.offsetLeft

  minusspanwidth=minusspanobj.offsetWidth

  plusspanwidth=plusspanobj.offsetWidth

  movingspanobj.onmousemove=e_resizespan

}