Mouse handles are not in sync with the mouse

问题:

I am trying to select a selection handle and then move it but the mouse handles are not in sync with the mouse pointer.

when you select the rectangle and then try to move the middle selection handle to create a gap in the rectangle the mouse pointer is positioned away from the handle is.

Fiddle is : http://jsfiddle.net/3PwWY/

                  case 8:
                if(mx > mySel.x + mySel.w/2)
                     mySel.windowWidth = mx - (mySel.x + mySel.w/2);
                else
                      mySel.windowWidth = (mySel.x + mySel.w/2) - mx;


                // Enforce limits on mx:
                //     Should not be closer than 5 pixels to this.x (left side of metric box)
                //     Should not be > this.x + width/2 (middle of metric box)
                  if(mySel.windowWidth < 2*  minGold)
                                           mySel.windowWidth = 2*  minGold;
                console.log(mySel.windowWidth);
                break;
            case 9:
                 if(mx > mySel.x + mySel.w/2)
                     mySel.windowWidth = mx - (mySel.x + mySel.w/2);
                else
                      mySel.windowWidth = (mySel.x + mySel.w/2) - mx;
                // Enforce limits on mx:
                //     Should not be closer than 5 pixels to this.x (left side of metric box)
                //     Should not be > this.x + width/2 (middle of metric box)
              //   mySel.windowWidth = mx - (mySel.x + mySel.w/2);

                console.log(mySel.windowWidth);
                break;