jqueryを使ってみる(ドラッグアンドドロップの実装まで)


最近、jqueryを勉強し始めました。勉強し始めるまでは、jqueryは「ブラウザ上でいろんなことが出来るようになる素晴らしいツール」というざっくりとした認識だったのですが、結局jqueryを使うために何をしたらよいのかわかりませんでした。
jqueryを勉強し始め、実際に実装してみて驚いたことが、あまりにも簡単に実装できてしまうことです。この簡単さをいろんな方に伝えたいという衝動にかられたので、「jqueryによるドラッグアンドドロップの実装方法」を当記事にまとめたいと思います(まとめるという程のボリュームじゃないのですが、、、)。
※Rails3.1対応

1. jquery-uiを読み込む
/app/assets/application.jsに、



//= require jquery-ui

を記述する。

2. ドラッグさせたいサンプル文字(任意)を記述し、IDを指定する
htmlファイル(ex. /app/views/samples/index.html.erb)に、



<div id="draggable">
sample
</div>

を記述する。

3. IDを指定した要素をドラッグ出来るようにする
htmlファイル(ex. /app/views/samples/index.html.erb)に、



<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>



以上で、"sample" という文字列をドラッグアンドドロップで動かせるようになりました!
これ以降は、基本的には2と3を行うこと(要素に対してIDを指定して、そのIDに対してjqueryメソッドを与えること)で、さまざまなことが出来るようになると思います。以下のサイトにサンプルコードも載っているので、どんどん試してみてください!
<参考サイト>
jQuery UI - Demos & Documentation
jQuery 日本語リファレンス