使用鼠标调整html元素的大小-jQuery

Question

I have container and I want to resize it with mouse using JavaScript. the implementation uses mousedown , mouseup , and mousemove events but I have slight problem when page is already scrolled before the mousedown is fired.

the whole page seems to scroll to position zero. How can i fix it so whether page is already scrolled or not the resize will work fine.

JS:

//resize div vertically or horizontal or both
$.fn.resizeMe = function(options){

var grippie = $(this),
options  = $.extend({resizeMe:"",resize:"vertical"},options),
resizeMe = $(options.resizeMe);
grippie.on('mousedown',function(e){initialiseGrippieResize(e)});


function initialiseGrippieResize(e) {
$(window).on('mousemove',function(e){
    startResizing(e);
    resizeMe.css({opacity:.25});
}).on('mouseup',function(e){
   stopResizing(e);
   resizeMe.css({opacity:1});
});
}

//css objects
function cssOBJ(e,key){
var css = {
        vertical:{height:(e.clientY -  resizeMe.offset().top)},
        horizontal : {width:(e.clientX -  resizeMe.offset().left)},
        both: {
        height:(e.clientY -  resizeMe.offset().top),
        width: (e.clientX -  resizeMe.offset().left)
        }

    };
    //return objects
    return css[key];
}

//Start Resizing
function startResizing(e) {
    resizeMe.css(cssOBJ(e,options.resize));
}
function stopResizing(e) {
    $(window).off('mousemove mouseup');
}

}

$('.grippie').resizeMe({resizeMe:"#pane",resize:'vertical'});

HTML:

<div id='main-container'>
  <div id='pane' arial-lable='content-wrapper'>contents will go here</div>
  <div class='grippie'></div>
</div>

CSS:

#pane{
    resize: n-resize;
    overflow: hidden;
    border: 1px solid #d6d9dc;
    padding:15px 20px;
    min-height:50px;
  }
  #pane *{border:0px !important; background: #fff !important;}
  .grippie {
      background-position: center;
      border: 1px solid #d6d9dc;
      border-width: 0 1px 1px;
      cursor: s-resize;
      height: 9px;
      overflow: hidden;
      background-color: #eff0f1;
      /*background-image: url('images/icons.png');*/
      background-repeat: no-repeat;

Answer 1

In JavaScript

pageX , pageY , screenX , screenY , clientX , and clientY returns a number which indicates the number of physical “CSS pixels” a point is from the reference point. The event point is where the user moved the mouse, the reference point is a point in the upper left. These properties return the horizontal and vertical distance from that reference point.

but pageX or pageY returns a number which indicates the amount of page scrolled top or left.

so changing the clientX to pageX and clientY to pageY

solved the problem and now I can resize any element. :) :)

//css objects
function cssOBJ(e,key){
var css = {
        vertical:{height:(e.pageY -  resizeMe.offset().top)},
        horizontal : {width:(e.pageX -  resizeMe.offset().left)},
        both: {
        height:(e.pageY -  resizeMe.offset().top),
        width: (e.pageX -  resizeMe.offset().left)
        }

    };
    //return objects
    return css[key];
}