jQuery UIのdraggable・droppableとsortable

JavaScript jQuery

iGoogleのように、縦にガジェットを複数ぶら下げたのを横に並べて、
並び替えできるUIを作りたいので、
jQuery UIの調査をしました。

draggable・droppableとsortableは併用不可

それぞれ縦にsortableを使って、draggable・droppableで列間の移動を実現すればいいのかと思って、
いろいろ試してみたところsortableとdraggableの併用は出来ないことがわかりました。
draggableメソッドを実行するのが、
移動させたい要素そのもの(をラップしたjQueryオブジェクト)であるのに対し、
sortableメソッドを実行するのは、
並び替える要素を含む親要素であるという違いがあります。
そのため、親要素でsortableメソッドを実行し、
その子要素でdraggableメソッドを実行した場合、
draggableによってマウスイベントが親要素まで伝播しない(こういう言い方でいいの？)ため、
sortableの並べ替え機能が動かないという現象が発生してしまいます。

実はsortableのみで前述のUIは作れる

ネストしたdivなどで「縦にガジェットを積み重ねられるのを3つ並べた」のを作り、
ガジェットのコンテナになる内側のdivに振ったクラスをitemsとして、
一番外側の要素でsortable({items:'.item'})のようにしてやれば、
列内移動・列間移動ができるUIができるのでした。

<html>
<head>
<script type="text/javascript" src="../js/jquery-1.2.3.js"></script>
<script>
$(document).ready(function(){
	$('#menu').sortable({items:'.item'});
});
</script>
<style>
.item{
	width:40px;
	height:40px;
	border-top:1px red solid;
	border-bottom:2px red solid;
}
.items{
	float:left;
	height:200px;
	border:1px green solid;
}
</style>
</head>
<body>
<script type="text/javascript" src="../js/jquery.dimensions.js"></script>
<script type="text/javascript" src="../js/ui.mouse.js"></script>
<script type="text/javascript" src="../js/ui.sortable.js"></script>
<div id="menu">
	<div class="items">
		<div class="item">1-1</div>
		<div class="item">1-2</div>
		<div class="item">1-3</div>
	</div>
	<div class="items">
		<div class="item">2-1</div>
		<div class="item">2-2</div>
		<div class="item">2-3</div>
	</div>
	<div class="items">
		<div class="item">3-1</div>
		<div class="item">3-2</div>
		<div class="item">3-3</div>
	</div>
</div>
</body>
</html>