jQuery UI

イベントの種類、表示領域の大きさ、ドラッグの方向を表示する

 function labelData(ev,ui) {
    $('#label-event').text(ev.type);
    $('#label-width').text($(this).width());
    $('#label-height').text($(this).height());
    $('#label-axis').text(ui.axis);
}

$(document).ready(function() {
   var ex1=$('div#ex1');
   ex1.resizable( {
     start:labelData,
     stop:labelData,
     resize:labelData
} );
    $('#label-width').text(ex1.width());
    $('#label-height').text(ex1.height());
} );

CSS設定

div#ex1{
width:250px; height:100px;
overflow:hidden;
border:1px dashed #000;
}
p{
margin:3px;padding:3px;
}
●デフォルトでは下辺、右辺、右下角のみがドラッグ可能。ドラッグの方向が"se"と表示されるとあるが動作していない。不明


実行例　

イベント：イベントの種類

サイズ：幅,高さ

ドラッグの方向：方向


html
<div id="ex1" class="ui-wrapper">
  <p>イベント：<span id="label-event">イベントの種類</span></p>
  <p>サイズ：<span id="label-width">幅</span>,<span id="label-height">高さ</span></p>
  <p>ドラッグの方向：<span id="label-axis">方向</span></p>  
</div>