olidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

Ajax,Javascript、コンテンツを効果的に表現するスクリプトサンプル設置方法

  1. Home>
  2. コンテンツ表示>
  3. フローティングボックス>
  4. ドラッグ＆ドロップでリサイズ、移動可能なボックス

フローティングボックスjqDnR

ドラッグ＆ドロップでリサイズ、移動可能なボックス

スポンサードリンク
  • del.icio.us に登録
  • ライブドアクリップに追加
  • Google Bookmarks に追加
  • はてなブックマークに追加
  • Yahoo!ブックマークに登録
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<style>
 
.jqDrag {
	width: 100%;
	cursor: move;
}
 
.jqResize {
	 width: 20px;
	 height:20px;
	 position: absolute;
	 bottom: 0;
	 right: 0;
	 z-index: 4;
	 cursor: se-resize;
	 background:url(size.jpg) bottom right no-repeat;
}
 
.jqDnR {
    z-index: 3;
    position: relative;
    width: 600px;
	height:100px;
    font-size: 12px;
    background-color: #FFF;
    border: 1px solid #CCC;
	margin-bottom:10px;
}
.jqDnR table,.jqDnR table tr td{
    height:100%;
    width:100%;
}
h3.jqDrag{
    height:30px;
    width:90%;
    margin:0;
    padding:0 5%;
    line-height:30px;
    border-bottom:1px solid #CCC;
    background:url(h3.jpg);
}
p{margin:0; padding:10px;}
</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqDnR.js"></script> 
<script type="text/javascript"> 
$().ready(function() {
	$('#ex1').jqResize('.jqResize');
	$('#ex2').jqDrag();
	
	$('#ex2b')
		.css('opacity',0.6)
		.jqDrag();
	$('#ex3').jqDrag('.jqDrag').jqResize('.jqResize');
});
</script> 

</head>

<body>
<div id="ex1" class="jqDnR"> 
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="middle">リサイズ可能なボックス</td>
  </tr>
</table>
<div class="jqResize"></div> 
</div>

<div id="ex2" class="jqDnR jqDrag">
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="middle">自由に移動可能なボックス。（移動時は半透明）</td>
  </tr>
</table>
</div>

<div id="ex3" class="jqDnR">
  <h3 class="jqDrag">リサイズ＆ムーブ</h3>
  <p>ドラッグ＆ドロップにより、リサイズと移動が可能なボックス。</p>
  <div class="jqResize"></div>
</div>

</body>
</html>

ドラッグ＆ドロップでリサイズ、移動可能なボックスを作成するjqDnR。
動作も軽快で、実装も簡単、デザインも自由にカスタマイズできます。
主な機能は３種類で、リサイズ可能なボックス、移動可能なボックス、リサイズと移動が可能なボックスを作成できます。
jquery.ｊｓが必要になります。 

ダウンロード

サイトへ行きjqDnR.jsをダウンロードします。
それと同時に、jquery.ｊｓもダウンロードしてきてください。
この二つのファイルをアップロードしたら、ページのヘッダーに読み込ませます。

<script type="text/javascript" src="jquery.js"></script>　

<script type="text/javascript" src="jqDnR.js"></script>　

次にスクリプトのターゲットと動作を指定します。

<script type="text/javascript">　

$().ready(function() {
$('#ex1').jqResize('.jqResize');　

$('#ex2').jqDrag();　

$('#ex2b')　

.css('opacity',0.6)　

.jqDrag();　

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

});　

</script>　

#ex1,#ex2,#ex3はターゲットとなるタグに付加するID名です。
その後に続くjqResize等が動作の内容になります。
リサイズのみの場合はjqResize('.jqResize');、移動の場合は.jqDrag();、両方の場合はjqDrag('.jqDrag').jqResize('.jqResize')、と記述します。
#ex2の.css('opacity',0.6)は、ドラッグ時の透過率です。

次はCSSの設定です。

.jqDrag {　

    width: 100%;　

    cursor: move;　

}　

.jqResize {　

    width: 20px;　

    height:20px;　

    position: absolute;　

    bottom: 0;　

    right: 0;　

    z-index: 4;　

    cursor: se-resize;　

    background:url(size.jpg) bottom right no-repeat;　

}　

.jqDnR {　

     z-index: 3;　

    position: relative;　

    width: 600px;　

    height:100px;　

    font-size: 12px;　

    background-color: #FFF;　

    border: 1px solid #CCC;　

    margin-bottom:10px;　

}　

.jqDrag,.jqResize,.jqDnRの３つを設定しておきます。
これで一通りの設定が完了しますので、次はタグにIDをマークアップしていきます。

マークアップ

リサイズだけの場合

<div id="ex1" class="jqDnR">　

　　　　　　コンテンツ 
    <div class="jqResize"></div>
</div>　

ヘッダーでつけたIDと、class="jqDnR"を付加します。
これでこの範囲がリサイズの対象となり、<div class="jqResize"></div>のようにドラッグして掴む箇所をその内部に配置します。

移動だけの場合

<div id="ex2" class="jqDnR jqDrag">　

　　　　コンテンツ 　

</div>　

IDを付加し、クラスにjqDnRとjqDragを指定してやります。
これでこの範囲がドラッグ＆ドロップで移動可能な範囲になります。

リサイズと移動を同時に行う場合

<div id="ex3" class="jqDnR">　

    <h3 class="jqDrag">リサイズ＆ムーブ</h3>　

    <p>ドラッグ＆ドロップにより、リサイズと移動が可能なボックス。</p>　

    <div class="jqResize"></div>　

</div>　

リサイズのみの場合とほぼ同じで、異なる点はリサイズの範囲内に、ドラッグ＆ドロップで移動する為のトリガーを設置するところです。
今回の場合は<h3 class="jqDrag">がそれに該当します。  jqDragをクラスとして付加するだけで、その箇所がドラッグの対象となります。 

関連スクリプト

感想

限られたスペースにコンテンツをレイアウトしていく作業にはいつも頭を悩まされますが、こういったスクリプトを使用して、ある意味ユーザー任せにしても良いのではないでしょうか。
ただ本格的にユーザー任せにするなら、レイアウトなどをクッキーにでも記憶させといてサーフィンを快適にしないといけないのかなと思ったり、、、悩ましいです。 

スクリプトの使用について

SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。

結局、エックスサーバーなんですよね。