jQueryを利用したUIはさまざま実験サンプルを作ったり紹介したりしてきましたが、
未だドラッグに関してのUIをあまり実験したことがなかったので
サンプルを交えて簡単にドラッグUIを実装する方法を紹介してみます。

jQueryでドラッグUIを実装する方法(ドラッグスクロールサンプル)

まず動作サンプルから。
下記の写真下にあるスクロールバーをドラッグしてください。

スクロールバーをドラッグして動かすことで
上に配置してある写真エリアがスクロールします。

jQueryでドラッグUIを実装する際には、
通常のライブラリファイルの他に、
jQueryUIファイルである、
———————————–
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.mouse.js
jquery.ui.draggable.js
———————————–
の各ファイルを使用します。
※jQuery1.3.2以前の古いバージョンを使用する場合はjQueryUIのファイル構成が異なります。

紹介したサンプルの構成について、
まずはHTMLから。

◆HTML
<div id="drag_mask">
<ul>
<li><a href="http://instagr.am/p/R_QzR/?ref=nf" target="_blank"><img src="img/photo01.jpg" /></a></li>
<li><a href="http://instagr.am/p/TZBH0/?ref=nf" target="_blank"><img src="img/photo02.jpg" /></a></li>
<li><a href="http://instagr.am/p/URQV0/?ref=nf" target="_blank"><img src="img/photo03.jpg" /></a></li>
<li><a href="http://instagr.am/p/UiVny/?ref=nf" target="_blank"><img src="img/photo04.jpg" /></a></li>
<li><a href="http://instagr.am/p/T8Ua7/?ref=nf" target="_blank"><img src="img/photo05.jpg" /></a></li>
<li><a href="http://instagr.am/p/U-F3B/?ref=nf" target="_blank"><img src="img/photo06.jpg" /></a></li>
</ul>
</div><!--/#drag_mask-->

全体を任意の<div>で囲い、
あとは単純な<li>リストで画像を横並びにしています。

そしてCSSは以下の様に。

◆CSS
#drag_mask {
	margin: 0 auto 20px auto;
	padding: 20px 0;
	width: 500px;
	height: 150px;
	text-align: left;
	border: #cccccc 1px solid;
	position: relative;
	overflow: hidden;
}

#drag_mask ul {
	width: 1000px;
	height: 150px;
	text-align: left;
	position: absolute;
}

#drag_mask ul li {
	margin-left: 20px;
	width: 140px;
	height: 140px;
	text-align: center;
	float: left;
	display: inline;
}

#drag_mask ul li img {
	width: 140px;
}

#drag_line {
	margin: 0 auto;
	width: 500px;
	height: 20px;
	text-align: left;
	border:1px solid #cccccc;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	background: #cccccc;
	position: relative;
	
}

#drag_pointer {
	width: 18px;
	height: 18px;
	border:1px solid #555;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	background: #555;
	cursor: w-resize;
}

特に、ドラッグUIを構成する為の重要な要素というものはなく
単純なレイアウト組みとなっています。
(「#drag_line」と「#drag_pointer」はスクリプト側から生成する
ドラッグ用スクロールバーの指定になっています。)

そして肝心のスクリプト構成は
以下の様になります。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.draggable.js"></script>
<script type="text/javascript">
$(function(){
	$('<div id="drag_line"><div id="drag_pointer"></div></div>').insertAfter('#drag_mask');

	$('#drag_pointer').draggable({
		drag: function(){
			var posLeft = parseInt($(this).css('left'));
			$('#drag_mask ul').css({left:-(posLeft)});
		},
		containment:'parent',
		opacity:'0.7'
	});
});
</script>

jQueryファイルとjQueryUIの必要なファイルをもろもろ読み込みます。

function開始後、1行目の
「$(‘<div id=”drag_line”><div id=”drag_pointer”></div></div>’).insertAfter(‘#drag_mask’);」
は写真エリアの後にドラッグ用スクロールバーのエリアを生成する指定になっています。

実際のドラッグ操作については
「$(‘#drag_pointer’).draggable()」の指定から実行させます。

「.draggable()」から後の動作オプションにて、
「drag:」で、ドラッグ中に上部の写真エリアをスクロールするfunctionを実行し、
ドラッグする範囲「containment:」の指定を親要素にあたる「parent」に設定、
ドラッグ中は掴んでいる要素の透明度を「0.7」にする指定を加えてあります。
(今回のサンプルでは「containment:」にあたる親要素は「#drag_line」になります)

今回はドラッグ中のみfunctionを実行させていますが、
ドラッグ開始時やドラッグ終了時など、それぞれの実行タイミングで、
何か別々のfunctionを設定することも可能です。

ドラッグ操作を実行させる「$(●●●●).draggable()」に付加することができる
オプションやオブジェクトプロパティなど細かなものについては
下記のリファレンスサイトがとても参考になります。

Draggable – jQuery UI API 1.8.4 日本語リファレンス – StackTrace

今回のサンプルは単純なドラッグスクロールになりますが
これを元にいろいろなドラッグUIを試してみたいと思います。
(ちなみにjQueryのドラッグUIは通常、iPhoneでは動作しません。。。)

jQueryでドラッグUIが必要になった際に是非。。。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryでドラッグUIを実装する方法(ドラッグスクロールサンプル)

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR