jQueryUIを触ってみる

JavaScript jQuary

貴重な勉強時間を何に使うかそわそわしながら悩んで、結局貴重な時間を無駄遣いしているわけですが、
後出しの分Yahoo!UILibraryやscript.aculo.usよりも洗練されてるんじゃないのかという思い込みからjQueryUIに手を出してみることにしました。
今日の教材はこれです
jQuery UIで実現！ Ajaxで複数選択ドラッグ＆ドロップ（1/4） ─ ＠IT

早速jQueryUIの取得

jQuery UI: Widgets, Components, and InteractionからDownload jQuery UI!という所を選ぶと
jquery.ui-1.5b.zip - jqueryjs - Google Codeに繋がったのでそれをダウンロード。
ｊQuery本体も持ってくるかと思いきや、このアーカイブの中にMinified版のｊQueryが含まれていました。
※ｊQueryには最小版、全部入り版とソースを読むための非圧縮版があります。
※このへんに詳しい説明があります。jquery.jsを読み解く：第1回　jQueryライブラリ（1〜171行目）｜gihyo.jp … 技術評論社

draggableサンプルの作成と実行

jquery.ui-1.5b.zipを展開してできたディレクトリ「jquery.ui-1.5b」の横にdraggable.htmlを作成します。
公式デモ：Draggable Demo

draggable.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>jQueryUI - draggableテスト</title>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<script type="text/javascript" src="jquery.ui-1.5b/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="jquery.ui-1.5b/jquery.dimensions.js"></script>
<script type="text/javascript" src="jquery.ui-1.5b/ui.mouse.js"></script>
<script type="text/javascript" src="jquery.ui-1.5b/ui.draggable.js"></script>
<script type="text/javascript" src="jquery.ui-1.5b/ui.draggable.ext.js"></script>
<style type='text/css'>
#target {
  border:  solid gray 1px;
  padding: 5px;
  width:   100px;
  text-align: center;
  background-color: lightblue;
}
</style>
</head>
<body>
<div id='target'>ドラック可能</div>
<script type="text/javascript">
	$('#target').draggable();
</script>
</body>
</html>

おードラッグできた。

draggableのオプションとして別の要素への吸い付き設定やイベントハンドラの設定ができるみたい。
また、draggableのインスタンス、オプション、現在位置、現在位置(絶対位置)の情報が提供されるようです。

draggableメソッドに追記して、位置情報がalertでポップアップされるようにした例。

<script type="text/javascript">
$('#target').draggable({
	stop: function(e, ui) {
	alert(' top: ' + ui.position.top + ' left: ' + ui.position.left);
	}
});
</script>

droppbleサンプルの作成と実行

先ほどのdraggable.htmlにドロップ部分を追記してdroppable.htmlを作成します。
教材がちょっと間違っててdroppable()の内部の{}が合ってないので直した。
公式droppableデモ：Droppable Demo

droppable.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>jQueryUI - droppableテスト</title>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<script type="text/javascript" src="jquery.ui-1.5b/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="jquery.ui-1.5b/jquery.dimensions.js"></script>
<script type="text/javascript" src="jquery.ui-1.5b/ui.mouse.js"></script>
<script type="text/javascript" src="jquery.ui-1.5b/ui.draggable.js"></script>
<script type="text/javascript" src="jquery.ui-1.5b/ui.draggable.ext.js"></script>
<script type="text/javascript" src="jquery.ui-1.5b/ui.droppable.js"></script>
<script type="text/javascript" src="jquery.ui-1.5b/ui.droppable.ext.js"></script>
<style type='text/css'>
#target {
	border:  solid gray 1px;
	padding: 5px;
	width:   100px;
	text-align: center;
	background-color: lightblue;
}
#goal {
	border:  solid gray 1px;
	padding: 5px;
	width:   100px;
	text-align: center;
	background-color: lightgreen;
}
</style>
</head>
<body>
<div id='target'>ドラッグ可能</div>
<div id='goal'>ドロップ可能</div>
<script type="text/javascript">
$('#target').draggable();
$('#goal').droppable({
	accept: '#target',
	drop: function(e, ui) {
		alert('ドロップされました');
	}
});
</script>
</body>
</html>

おードロップしたらなんか反応した。

selectableサンプルの作成と実行

selectable.htmlを作成します。
公式selectableデモ：Selectable Demo

selectable.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>jQueryUI - droppableテスト</title>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<script type="text/javascript" src="jquery.ui-1.5b/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="jquery.ui-1.5b/jquery.dimensions.js"></script>
<script type="text/javascript" src="jquery.ui-1.5b/ui.mouse.js"></script>
<script type="text/javascript" src="jquery.ui-1.5b/ui.draggable.js"></script>
<script type="text/javascript" src="jquery.ui-1.5b/ui.draggable.ext.js"></script>
<script type="text/javascript" src="jquery.ui-1.5b/ui.droppable.js"></script>
<script type="text/javascript" src="jquery.ui-1.5b/ui.droppable.ext.js"></script>
<script type="text/javascript" src="jquery.ui-1.5b/ui.selectable.js"></script>
<style type='text/css'>
#target {
	border:		solid gray 1px;
	padding:	5px;
	width:		150px;
	background-color:	lightblue;
}
#target div {
	margin:		10px;
	border:		solid black 1px;
	padding:	10px;
	text-align: center;
	width:		100px;
	background-color:	lightgreen;
}
#target div.ui-selecting {
	background-color:	lightpink;
}
#target div.ui-selected {
	background-color:	orange;
}
</style>
</head>
<body>
<div id='target'>
	<div>item 1</div>
	<div>item 2</div>
	<div>item 3</div>
</div>
<script type="text/javascript">
$('#target').selectable({
	unselecting: function(e, ui){console.debug(ui)}
});
</script>
</body>
</html>

選択可能な要素は、選択に応じてCSSクラスが自動的に付与される。ふむふむ。

  • ui-selectable　選択可能な子要素
  • ui-selectee 選択中or選択済みの子要素
  • ui-selecting 選択中の子要素
  • ui-selected 選択済みの子要素

教材のサンプルについて

教材の複数ドラッグ＆ドロップ可能なサンプルでは
複数要素を選択し、まとめて移動しているが、draggableでは要素一つの移動しかサポートしていないため、
他の要素もまとめて移動するように、初期位置を保存しておき、移動量に応じて選択中の全要素を移動しているらしい。凄いね。