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

Question

我有容器，我想使用 JavaScript 通过鼠标调整它的大小。该实现使用 mousedown 、mouseup 和 mousemove 事件，但是当页面在 mousedown 触发之前已经滚动时，我遇到了一些问题。

整个页面似乎滚动到位置零。我该如何修复它，以便无论页面是否已经滚动，调整大小都可以正常工作。

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

在 JavaScript 中

pageX、pageY、screenX、screenY、clientX 和 < strong>clientY 返回一个数字，指示点距引用点的物理“CSS 像素”数量。事件点是用户移动鼠标的位置，引用点是左上角的点。这些属性返回距该引用点的水平和垂直距离。

但是pageX或pageY返回一个数字，指示页面向上或向左滚动的量。

因此将clientX更改为pageX，将clientY更改为pageY

解决了问题，现在我可以调整任何元素的大小。 :) :)

//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];
}