はじめに
jQuery UIは，ドラッグアンドドロップ，カレンダー，スライダーなどを始め，さまざまなユーザインターフェースを簡単に実装することができるようになるjQueryのライブラリです。ユーザインターフェースに関係する機能がたくさん含まれたjQueryのプラグインと思ってもらえばわかりやすいかと思います。
jQuery UIはたくさんの機能を提供するので，機能が全部入ったスクリプトのファイルはかなりの容量になります（現時点での最新版である1.8.14の圧縮版で約210KB）。すべての機能を使うということはほとんどないので，jQuery UIは使用する機能だけ選択してダウンロードできるカスタムダウンロードを提供しています。
今回jsdo.itで使うサンプルのコードは全部入りのjQuery UIを使いますが，実際に使う場合はカスタムダウンロードしたコードを使ったほうがいいでしょう。
また，今回紹介しきれない機能やオプションなどについてはドキュメントやデモのページを参照してみてください。
- http://jqueryui.com/demos/（公式サイト）
- http://stacktrace.jp/jquery/ui/（日本語サイト）
jQuery UIを使う
それでは早速jQuery UIを使ってみましょう。jsdo.itでjQuery UIを使う場合にはあらかじめ用意されている，Major Librariesから読み込むことができるので，簡単に使うことができます。jQuery UIを使うにはjQueryも必要ですので，jQueryとjQuery UIをロードします。
jQueryとjQuery UIの2つのがロードされているのがわかると思います。まずはjQuery UIを使ってドラッグの機能を実装してみましょう。以下のサンプルでは要素がドラッグアンドドロップできるようになっています。
これはjQuery UIのDraggableを使っています。JavaScriptコードを見てもらうとわかりますが，以下のようにたった一行だけしか書いてありません。
$('.box').draggable();
jQuery UIを使うとこれだけで要素をドラッグして動かせるようになります。また簡単さに加えてさまざまな機能をオプションやイベントで設定できるのもjQuery UIの特徴の一つです。たとえば今のコードに，ドラッグ中に要素の色を変えるという機能を追加してみます。
追加したコードは以下のようになります。これもとても短いコードで実現できるというのがわかると思います。
$('.box').draggable({
// ドラッグ開始時に実行される
start: function() {
$(this).css('background', '#C00');
},
// ドラッグ終了時に実行される
stop: function() {
$(this).css('background', '#CCC');
}
});
