When it’s ready.

出来るまで出来ない

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をダイナミックに変えたり、スナップと親子関係作れるようになりたいけどいまいちやり方が分からない。