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" rel="noopener"><img src="img/photo01.jpg" /></a></li> <li><a href="http://instagr.am/p/TZBH0/?ref=nf" target="_blank" rel="noopener"><img src="img/photo02.jpg" /></a></li> <li><a href="http://instagr.am/p/URQV0/?ref=nf" target="_blank" rel="noopener"><img src="img/photo03.jpg" /></a></li> <li><a href="http://instagr.am/p/UiVny/?ref=nf" target="_blank" rel="noopener"><img src="img/photo04.jpg" /></a></li> <li><a href="http://instagr.am/p/T8Ua7/?ref=nf" target="_blank" rel="noopener"><img src="img/photo05.jpg" /></a></li> <li><a href="http://instagr.am/p/U-F3B/?ref=nf" target="_blank" rel="noopener"><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="https://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が必要になった際に是非。。。