Garder le curseur de la souris sur la poignée lorsque la souris se déplace

Question

J'ai construit simple colonne de table Resizer ici:

http://jsfiddle.net/44k6c/

Je ne peux pas utiliser un plugin pour cela, mais je dois imiter la fonctionnalité dans ce plugin :

http://quocity.com/colresizable/

J'ai réussi à et les cols, mais mon bien redimensionnement curseur est autorisé à se déplacer loin de la poignée (la boîte grise dans la e). Je dois en quelque sorte contraindre le curseur pour qu'il reste sur le manche lorsque la souris est déplacée. J'ai regardé dans le code source du plugin ci-dessus, mais il n'a pas fait la lumière sur la façon d'y parvenir.

code de mon travail est en cours et est assez rude au moment:

$(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

Est-ce jsFiddle résoudre le problème?

Vous avez probablement eu un problème dans ces lignes:

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

il devrait probablement:

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

EDIT: Bad link. Utilisez celui-ci: http://jsfiddle.net/44k6c/4/