jQuery UIのsortableでhandleオプションを指定してクリックできる要素を限定する

jQuery UIのsortableをデフォルトで使用すると、要素のどこでもクリックして並び替えを開始できます。（正確にはできない要素もあります、後述します）
特定の要素だけに限定させるオプションがhandleです。
http://api.jqueryui.com/sortable/#option-handle

デモ画面
このデモ画面では、上下矢印アイコン（太線）でだけ並び替えができます。
これは矢印アイコンに"sortable-handle"クラスを追加して、sortable({handle: "sortable-handle"})と呼んでいるからです。

html

<ul id="sortable-with-handle1" class="sortable-li">
	<li class="ui-state-default">
		<a class="ui-state-default ui-corner-all ui-button sortable-handle">
			<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
		</a>
		項目 1
		<button class="ui-state-default ui-corner-all ui-button sortable-handle">
			<span class="ui-icon ui-icon-arrow-2-n-s"></span>
		</button>
	</li>
	～～略～～
</ul>

CSS

.sortable-li {
	padding: 0;
	list-style-type: none;
	width: 50%;
}

javascript

$(function(){
	$('#sortable-with-handle1').sortable({handle: ".sortable-handle"});
});

デモ画面では細線の上下矢印アイコンにも"sortable-handle"クラスを指定していますがこれでは並び替えはできません。
太線アイコンと細線アイコンの違いは前者がaタグで後者はbuttonタグという違いです。
ここで最初の話に戻りますが、デフォルトだとbuttonタグでは並び替えをすることができません。これを指定しているのがcancelオプションでデフォルトでは"input,textarea,button,select,option"が設定されています。

以上

コアjQuery＋プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)