마우스

Question

를 이동할 때 내가 여기에 간단한 테이블 열 크기 변경 내장 한 핸들 위로 마우스 커서를 유지 :이에 대한 플러그인을 사용할 수 없습니다

http://jsfiddle.net/44k6c/

을하지만이 플러그인의 기능을 모방 할 필요가 :

http://quocity.com/colresizable/

나는 등 잘 리사이징 COLS을 관리했지만 내 커서가 핸들합니다 (일의 회색 상자)에서 멀리 이동할 수있다. 어떻게 든 커서를 제한해야 마우스가 움직일 때 핸들 위에 유지됩니다. 위의 플러그인 소스 코드를 살펴 봤지만이를 달성하는 방법에 대해 밝히지 않았습니다.

내 JS 코드 진행중인 작품이다 순간에 상당히 거친 :

$(document).ready(function() { 

       var th, 
        previousColIndex, 
        nextColIndex, 
        previousColWidth, 
        nextColWidth, 
        thWidth, 
        currentXPos; 

       $('.resize').mousedown(function(e) { 
        currentXPos = e.pageX; 
        th = $(this).parent(); 
        nextColIndex = th.index() + 1; 
        nextColWidth = $('table tr th').eq(nextColIndex).width(); 
        thWidth = th.width(); 
        $(document).bind('mousemove',function(e){ 
         if(e.pageX < currentXPos) { 
          thWidth = thWidth - 1; 
          nextColWidth = nextColWidth + 1; 
          $('table tr td').eq(th.index()).css({'width': thWidth + 'px'}); 
          th.css({'width':thWidth + 'px' }); 
          $('table tr td,table tr th').eq(nextColIndex).css({'width': nextColWidth + 'px'}); 
          currentXPos = e.pageX; 
         } else { 
          thWidth = thWidth + 1; 
          nextColWidth = nextColWidth - 1; 
          $('table tr td').eq(th.index()).css({'width': thWidth + 'px'}); 
          th.css({'width':thWidth + 'px' }); 
          $('table tr td,table tr th').eq(nextColIndex).css({'width': nextColWidth + 'px'}); 
          currentXPos = e.pageX; 
         } 


        }) 
       }).mouseup(function(){ 


$(document).unbind('mousemove'); 


}) 

    $(document).mouseup(function() { 
    $(document).unbind('mousemove'); 

}) 
}) 

Answer 1

이 jsFiddle이 문제를 해결합니까?

thWidth = thWidth - 1; 
nextColWidth = nextColWidth + 1; 

이 아마해야합니다 :

thWidth = thWidth - currentXPos + e.pageX; 
nextColWidth = nextColWidth + currentXPos - e.pageX; 

편집 : 나쁜 링크

당신은 아마이 라인에 문제가 있었다. 이 하나를 사용하십시오 : http://jsfiddle.net/44k6c/4/