4

jquery UI を使用して要素のサイズを変更しています。たとえば、幅 1200px または 1600px (ユーザーの好み) までサイズ変更できる要素があります。ただし、この要素の前に要素がある場合 (すべての要素を水平に配置した場合)、マウス カーソルが画面の端に達するとサイズ変更アクションが停止します。

ここでテストできます: http://gopeter.de/clients/dustin/

一番右のボックスはサイズ変更可能です。

これを防ぐ方法を知っている人はいますか? カーソル位置を確認し、最後に到達したら要素を拡張する必要がありますか? それとも他のテクニックはありますか？

4

2 に答える 2

2

おそらく、本体のサイズを変更してスクロールし、継続的なサイズ変更を可能にすることができます。

var body = $('body');

$('#resize').resizable({
    handles: "e,s,se",
    resize: function (event, ui) {
        var width = body.width(),
            diff = width - (width - (this.offsetLeft + this.offsetWidth));

        body.width(diff).scrollLeft(diff);
    }
});

または（少ないjQuery）

$('#resize').resizable({
    handles: "e,s,se",
    resize: function (event, ui) {
        var width = document.body.clientWidth,
            diff = width - (width - (this.offsetLeft + this.offsetWidth));
        document.body.style.width = diff + 'px';
        document.body.scrollLeft = diff;
    }
});

関連するフィドルは次のとおりです。http://jsfiddle.net/jeff_mccoy/UpmNq/2/

例として、X 個のピクセル (!diff % 3) ごとにサイズを変更するだけで、これを少し高速化できることに注意してください。

于 2012-11-12T12:03:55.440 に答える
1

サイズ変更ハンドルを左側に配置するのが最適な場合があります。

于 2012-11-05T22:32:39.343 に答える