jQuery UIのsortableでconnectWithオプションを指定して他の一覧へ移動する

jquery-ui

他のsortable要素を指定することでその一覧に、対象の一覧内の要素を移動することができます。
http://api.jqueryui.com/sortable/#option-connectWith

デモ画面

このデモ画面では、
id="sortable-li-src"の一覧からid="sortable-li-dst"の一覧に移動できるようにしています。
このままでは片方向のみです。双方向に移動させたい場合は、$('#sortable-li-src')のsortable()のconnectWithオプションも指定すればOKです。

html
<ul id="sortable-li-src" class="sortable-li">
	<li class="ui-state-default">項目 A-1</li>
	<li class="ui-state-default">項目 A-2</li>
	<li class="ui-state-default">項目 A-3</li>
	<li class="ui-state-default">項目 A-4</li>
</ul>

<ul id="sortable-li-dst" class="sortable-li">
	<li class="ui-state-default">項目 B-1</li>
	<li class="ui-state-default">項目 B-2</li>
	<li class="ui-state-default">項目 B-3</li>
	<li class="ui-state-default">項目 B-4</li>
</ul>
CSS
.sortable-li {
	padding: 0;
	list-style-type: none;
	width: 50%;
}
javascript
$(function(){
	$('#sortable-li-src').sortable({connectWith: "#sortable-li-dst", placeholder: ""});
	$('#sortable-li-dst').sortable();
});

以上