10

サイズ変更操作の方向を決定するにはどうすればよいですか? 私はそれをグーグルで試してみたところ、jquery uiでチケットが見つかりました。それは修正されたと言っていました。しかし、それを使用する方法に関するドキュメントはありません。

4

7 に答える 7

5

開始時、サイズ変更、およびコールバックの停止：

$(this).data('resizable').axis
于 2010-08-25T20:23:36.937 に答える
5

サイズ変更操作を特定の軸に制限することを意味したのか、またはサイズ変更が実際に発生した方向を知りたいのかどうかはわかりません.

前者にしたい場合は、RaYellの答えが機能します。後者について説明します。

次のようにサイズ変更可能を設定した場合:

var r = $("#resizable");
r.resizable();

ユーザーがマウス ボタンを離した後、サイズ変更がどの方向で行われたかを知りたいとします。関数をサイズ変更停止イベントにバインドしましょう。

r.bind('resizestop', function(event, ui) {
    // determine resize deltas
    var delta_x = ui.size.width - ui.originalSize.width;
    var delta_y = ui.size.height - ui.originalSize.height;
}

渡された ui オブジェクトを使用して、古いサイズから新しいサイズを差し引くことで、サイズの相対的な変化を判断できます。その後は、好きなように使用できdelta_xますdelta_y。ハンドルの 1 つに対応する文字列を作成しましょう。

r.bind('resizestop', function(event, ui) {

    // determine resize deltas
    var delta_x = ui.size.width - ui.originalSize.width;
    var delta_y = ui.size.height - ui.originalSize.height;

    // build direction string
    var dir = '';

    if (delta_y > 0) { 
        dir += 's';
    } else if (delta_y < 0) { 
        dir += 'n';         
    }      

    if (delta_x > 0) { 
        dir += 'e';
    } else if (delta_x < 0) { 
        dir += 'w';
    }

    // do something with this string
    alert(dir);        
});

要素の両側にハンドルがある場合、サイズ変更を実行するために実際に使用されたハンドルが返されるとは限らないことに注意してください。正味の方向のみです。

于 2009-07-16T20:38:30.287 に答える
4

これはずっと前からの質問であることは知っていますが、与えられた解決策は私の問題を解決しません。start 関数でハンドラーにアクセスする方法を見つけました。それは FF と chrome で動作しています。私の組織は IE をサポートしていないため、テストされていませんが、この場合、より標準的なイベント処理であるため、FF の方法が機能するはずです。

$(".resizable").resizable({
    start: function (event, ui) {
        var dir = event.toElement ? event.toElement : event.originalEvent.target;
    }
});

dirが実際のハンドラーであり、そこからクラスと方向を見つける必要があります (クラス リストから解析します。そこに到達したら、私が行っていることを投稿します)。

多くの理由から、サイズ変更の前にサイズ変更が行われている方向を知ることは役に立ちます。jQuery には、どのハンドルが取得されたかを知る方法を含める必要があったと思います。

後で編集: jQueryUI は API 用のゲッターを提供します。この場合は、ハンドル リストを取得するために行います。

var handles = $( ".selector" ).resizable( "option", "handles" );

（馬の口からまっすぐです）。私の場合、それが「n」または「s」（上または下）であるかどうかを確認した後、開始関数で元のサイズを取得し、サイズ変更関数をループのように使用して、オブジェクトのサイズの変更を計算しました計算し続けることです。サイズが減少している場合、方向は南のハンドルからであれば上向き、北のハンドルからであれば下向きであり、サイズが増加している場合は、方向が南のハンドルから下向き、または北のハンドルから上向きであることを意味します。

プルされたのが 'n' か 's' かを調べるためにdir、クラスはui-handle-s.

下からのみリサイズするように変更したので、これのほとんどを使用することにはならなかったので、実際にはかなりユーモラスです。私はそれを使用していないので、他の誰かがこれを役に立てば幸いです。

于 2014-02-17T21:08:12.260 に答える
3

私はオプションhandlesがあなたが求めているものだと思います：

$(selector).resizable({handles: 'n, s, e, w'})

文字が地理的な方向を表す場合：

  • n-北（上）
  • s-南（下）
  • e-東（右）
  • w-西（左）
  • ne-北東（左上）
  • se-南東（左下）
  • nw-北西（左上）
  • sw-南西（左下）

上記のサブセットを好きなように使用してください。

そのオプションのドキュメントはここにあります

于 2009-07-16T20:13:17.357 に答える
3 
$(".ui-resizable-handle").live("mousedown", function(e) {
    $.ui.curResizeDirection = this.className.split("-").pop();
    console.log($.ui.curResizeDirection);
});
于 2011-12-20T07:47:39.730 に答える
0

jsonx には良い解決策がありますが、組み込みのイベントを利用することもできます:

$('#resizable').resizable({
    handles: 'n,s',
    start: function( event, ui ) {
        var handleDirection = event.srcElement.className.split("-").pop();
    }
});

このコードは、「#resizable」要素をサイズ変更可能にし、要素の北側と南側にハンドルを配置します。北のハンドルをクリックしてドラッグすると、handleDirection は「n」になります。「停止」イベントでこれを行う同様の方法を見つけることができませんでした。

于 2014-06-25T13:14:20.857 に答える