Q: Keeping mouse cursor over the handle when mouse moves I've built a simple table column resizer here:
http://jsfiddle.net/44k6c/
I can't use a plugin for this but I need to mimic functionality in this plugin:
http://quocity.com/colresizable/
I've managed to et the cols resizing well but my cursor is allowed to move away from the handle (the grey box in the th). I need to somehow constrain the cursor so it stays over the handle as the mouse is moved. I've looked in to the source code of the plugin above but it hasn't shed any light on how to achieve this.
My js code is a work in progress and is fairly rough at the 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');

 })
 })


A: Does this jsFiddle resolve the problem?
You probably had an issue in this lines:
thWidth = thWidth - 1;
nextColWidth = nextColWidth + 1;

it probably should be:
thWidth = thWidth - currentXPos + e.pageX;
nextColWidth = nextColWidth + currentXPos - e.pageX;

EDIT:
Bad link. Use this one: http://jsfiddle.net/44k6c/4/
