jQueryでDraggableはめちゃ簡単。
JUI2008に参加してから、いつかやってみたいと思っていたDragインターフェースを作ってみた。http://a2c.appspot.com/iu
普通にやるのは、いろんなところで書いてあるので、今回はGoogleI/Oで発表のあったAjaxLibraryを使用してjQuery使いました。
アプリは、以前メモキャッシュのテストで上げたアプリ。イメージをドラッグ出来るようにしました。えぇ、ただドラッグ出来るだけ。ドラッグに特に意味はないです。
jQueryのライブラリ呼ぶ部分
jQuery本体は、Googleから持って来れたけど、jQueryUIは持って来れなかったのでこっちは、Staticfileとして扱ってみた。
htmlの
<script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1.2");</script> <script src="/js/ui.core.js"></script> <script src="/js/ui.draggable.js"></script>
JSファイル置く所
ui系のjsは、app.yamlのある階層に
media/js/
というフォルダーを作って、その中にui.core.js と ui.draggable.js を入れる。これらのファイルは、/js/ファイル名 で公開したいので、そのようにapp.yamlを設定する。以下を追加
app.yamlの設定
- url: /js static_dir: media/js
DIVの設置
ドラッグしたいイメージ周りをdivで挟んで、draggableクラスを指定した。
<div id="one_img" class="draggable">イメージとか、日付とか</div>
jsスクリプト内容
さらに、jsのスクリプトを追加する。
<script> $(document).ready(function(){ $(".draggable").draggable({ opacity: 0.40 }); }); </script>
たったコレだけ。要素こんな風に「$('#one_img')」idで指定したかったんだけど、一個目の要素だけにしか適用されなかったのでクラスで指定した。オプションでopacity付けたのでドラッグ中に半透明になるはず。
http://a2c.appspot.com/iu
パズルとか、マルバツゲームとか、簡単に作れるなぁと思った。
課題
Z-indexをダイナミックに変えたり、スナップと親子関係作れるようになりたいけどいまいちやり方が分からない。