prototype.js && scriptaculous.js でドラッグドロップを実現する方法

以前書いた「prototype.js && scriptaculous.js」のドラッグドロップの実装方法。
今回やりたいのは、左右のリストの入れ替えと、上下のリストの入れ替え。
まずは以下のライブラリをロードする。

<script type="text/javascript" src="./prototype.js"></script>
<script type="text/javascript" src="./scriptaculous.js?load=effects,dragdrop"></script>
<script type="text/javascript" src="./prefecture.js"></script>

■prefecture.jsの記述方法

document.observe('dom:loaded',function(){
	var options = {
	constraint: false,
	containment: ['kanto','kansai'],
	dropOnEmpty: true,
	onUpdate: function(list){
		var methodStart = list.down('li') ? 'remove' : 'add';
		list[methodStart + 'ClassName']('empty');
	}
	};
	Sortable.create('kanto',options);
	Sortable.create('kansai',options);
});

■CSS記述方法

#move ul {
	/* position: absolute; top: 4em; padding: 0; */
	list-style: none; width: 10em;
}
#move li { 
	height: 2em; 
	cursor: move; 
	line_height: 2em;
	text-align: center;
	margin-botton: 0.5em;
	border: 1px solid gray;
	background: #ff9;
}
#move ul.empty{
	height: 2em;
	border: 1px solid silver;
	background: #ddd;
}

■htmlでの記述方法

				<ul id="kanto">
					<li id="prefecture_1">北海道</li>
					<li id="prefecture_2">岩手県</li>					
					<li id="prefecture_3">秋田県</li>					
					<li id="prefecture_4">青森県</li>					
					<li id="prefecture_5">新潟県</li>					
				</ul>

				<ul id="kansai">
					<li id="prefecture_30">大阪府</li>
					<li id="prefecture_31">京都府</li>					
					<li id="prefecture_32">香川県</li>					
					<li id="prefecture_33">奈良県</li>					
					<li id="prefecture_47">沖縄県</li>					
				</ul>

これだけでドラッグドロップが簡単に実装可能〜〜
あとはどうやってデータを取得するかだが、これも以下のjavascriptのコードで取得可能。

Sortable.sequence('kanto');