リサイズ&ドラッグする

説明補足説明コード関連書籍コメント投稿

このサンプルは、jQueryのjqDrag()とjqResize()プラグインを 利用してdiv要素をリサイズ&ドラッグできるようにします。 サンプルのボックスの上に表示されている赤のバーをドラッグするとボックスを移動できます。ボックスの右下の赤のバーをドラッグするとボックスをリサイズできます。

このサンプルは、jQueryのjqDrag()とjqResize()プラグインを 利用してdiv要素をリサイズ&ドラッグできるようにします。 サンプルのボックスの上に表示されている赤のバーをドラッグするとボックスを移動できます。ボックスの右下の赤のバーをドラッグするとボックスをリサイズできます。

$('#demo').jqDrag('.jqDrag').jqResize('.jqResize');   

<div id="demo" class="jqDnR">
  <div class="jqHandle jqDrag"></div>
  <br />
  I am an example Box<br />
  Using the Handles, you can *RESIZE* and *DRAG* me.
  <div class="jqHandle jqResize"></div>
</div>