jquery의 draggable을 사용하다가...

사용자가 마우스로 드래그하여 영역의 크기를 조정하는 기능을 구현하던중

 

3개의 DIV를 가지고 테스트를 할때는 별 무리가 없었는데

 

실제 좀 복잡한 UI에서 적용을 하니 이상한 동작이 일어났다..

 

마우스로 드래그를 하는데 left 값이 순차적으로 변하는게 아니라 널뛰기 하듯 튀는 현상이 발생!!!

 

여러가지로 확인을 해보았으나 이해할 수가 없었는데...

 

브라우저의 개발자 도구로 확인을 해보니 draggable을 적용한 DIV에 내가 지정하지 않은 값이 들어가 있는것을 확인.

 

결론은 div 에 draggable을 적용하면 draggable에서 해당 div의 여러가지 값을 변경하거나 지정한다.

 

이번 경우는 draggable에서 해당 DIV 에 position값을  relative로 변경하여서 발생하였던것..

 

그래서 draggable을 적용하고 바로 다음줄에서 해당 DIV에 position 값을 변경하여 해결!!

 

 

$('#div_b').draggable({
  axis : 'x',
  containment : [
   41,
   0,
   300,
   0
  ],
  drag : splitter
 });
 
 //draggable 함수가 position을 강제로 relative로 변경해서..
 $('#div_b').css("position","static");