WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

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

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]
◆HTML


[/html]

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

そしてCSSは以下の様に。

[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;
}
[/css]

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

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

[javascript]
◆SCRIPT






[/javascript]

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が必要になった際に是非。。。

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です