Question

使用单击并按住元素右下角的调整大小图像，不断调整元素大小的最佳方法是什么？是否有一个特定的空元素，内置调整大小或使用的样式比在JavaScript中使用while循环更好？

Answer 1

你去男人：

function c(a){console.log(a)}
function coords(el){
    var curleft, curtop;
    curleft=curtop=0;
    do{
        curleft+=el.offsetLeft;
        curtop+=el.offsetTop;
    } while(el=el.offsetParent);
    return [curleft,curtop];
}
Resizer = {
    attach: function(el,minh,minw){
        var rs=el.resizer=el.getElementsByClassName('drag')[0];
        rs.resizeParent=el;
        if(minh==undefined){
            el.minh=rs.offsetHeight*2;
        }
        if(minw==undefined){
            el.minw=rs.offsetWidth*2;
        }
        rs.onmousedown = Resizer.begin;


    },
    begin: function(e){
        var el=Resizer.el=this.resizeParent;
        var e=e||window.event;
        this.lastx=e.clientX;
        this.lasty=e.clientY;
        document.onmousemove=Resizer.resize;
        document.onmouseup=Resizer.end;
        return false;


    },
    resize: function(e){
        var e = e || window.event;
        var x,y,mx,my,el,rs,neww,newh;
        el=Resizer.el;
        rs=el.resizer;
        mx=e.clientX;
        my=e.clientY;
        neww=(el.clientWidth-(rs.lastx-mx));
        newh=(el.clientHeight-(rs.lasty-my));
        if(neww>=el.minw){     
            el.style.width=neww+'px';
            rs.lastx=mx;
        }
        else{
            rs.lastx-=parseInt(el.style.width)-el.minw;
            el.style.width=el.minw+'px';

        }
        if(newh>=el.minh){
            el.style.height=newh+'px';
            rs.lasty=my;
        }
        else{
            rs.lasty-=parseInt(el.style.height)-el.minh;
            el.style.height=el.minh+'px';

        }

        return false;


    },
    end: function(){
        document.onmouseup=null;
        document.onmousemove=null;
    }
};
window.onload=function(){
    Resizer.attach(document.getElementsByClassName('resize')[0]);
}

您的HTML需要如下所示：

<div class="resize"><
    div class="drag"></div>
</div>

两者都不需要成为div，但可调整大小的类需要“调整大小”，而可拖动元素的类需要“拖动”。

附上：

Resizer.attach(element);

...其中元素是要调整大小的元素。

适用于多个元素，如jsfiddle所示。您还可以传递最小高度和最小宽度。如果不这样做，它会自动使它们成为可拖动元素高度的两倍。

当您完全滚动时，它确实存在问题。我不确定如何应对它，但我会在以后再努力。

Answer 2

一般方法如下：

当onmousedown在调整大小目标上触发时，开始跟踪onmousemove
当onmousemove触发时，调整元素大小
当onmouseup触发时，清除onmousemove处理程序

所以基本上你只是回应事件，没有while循环或任何涉及的东西。

完成它可能有点棘手，以便它可以很好地工作，所以我建议看看是否有一个可以使用的JS库。获得此行为的一种非常简单的方法是使用jQuery UI's resizable component

使用鼠标不断调整元素大小的最佳方法是什么？

2 个答案: