ドラッグ＆リサイズが可能なjavascript「jqDnR」

限られたスペースで多くのコンテンツを詰め込みたいという葛藤は永遠の課題でしょう。
また、訪問者が自由なレイアウトを組めるようにするのは良いことかもしれません。
そこで、ドラッグ＆リサイズ可能なjavascriptjqDnRを紹介します。

使用方法
jqDnRからjqDnR.jsをjQueryからjquery.js、さらにDimensionsからjquery.dimensions.jsをダウンロードします。
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.dimensions.js" type="text/javascript"></script>
<script src="http://yourdomain/jqDnR.js" type="text/javascript"></script>
さらにドラッグとリサイズのスクリプトとCSSを以下のように記述します。
<script type="text/javascript">
$().ready(function() {
$('#id名').jqDrag('.jqDrag').jqResize('.jqResize');
});
</script>
<style type="text/css">
.jqHandle {background: red;height:10px;}
. {width: 100%;cursor: move;}
.jqResize {width: 10px;position: absolute;bottom: 0;right: 0;cursor: se-resize;}
.jqDnR {z-index: 3;position: relative;width: 180px;padding: 8px;background-color: #EEE;border: 1px solid #CCC;}
</style>
最後にドラッグ＆リサイズしたい要素にid名などを付与します。
<div id="id名" class="jqDnR">
<div class="jqHandle jqDrag"></div>
コンテンツ
<div class="jqHandle jqResize"></div>
</div>
ドラッグ＆リサイズが可能なjavascript「jqDnR」サンプル

2007年12月10日

前の記事：画像にグラデーションをかけるjavascript「Transparent Gradients」
次の記事：クールなウィンドウを表示できるjavascript「Mocha」

関連記事

• [jQuery]Draggables
• 要素を簡単にドラッグできるjavascript「EasyDrag jQuery Plugin」
• 奥から手前にズームするJavaScript「Spacegallery.js」
• amazonライクにぐるぐる回るJavaScript「3D Image Carousel」
• [jQuery]Confirm

• jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」
• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• BOMBERMAN JAVASCRIPT GAME by mootools.js
• 3ステップで表をソート＆値を検索できるjavascript「dataTables」
• Movable Type 4.2にバージョンアップ
• ページの目次を自動で作成するjavascript「jqTOC」
• JavaScriptライブラリ「raphael」で図を描く
• ニューデザイン
• Widgetboxで手軽にRSS型ウィジェット（ガジェット）を作る
• 奥から手前にズームするJavaScript「Spacegallery.js」