Jquery ui - sortable: sortable 要素内でアイコン 'handle' を使ってドラッグする。

質問

jquery ui sortablesが正常に動作していますが、ソート可能な要素には他のインタラクティブな要素が含まれています。ソート可能なDiv内の要素と相互作用するときに誤ってソートされるのを防ぐために、私はソート可能な要素、例えば各ソートの左上隅に存在する「移動」アイコンをドラッグするときにのみ、何とかソートのためのドラッグ動作を行いたいと考えています。これは、一般的なjquiで可能ですか、または私は私自身のフックを書く必要がありますか？

どのように解決するのですか?

オプション ハンドル プラグインでは、ソートを開始することができる要素を定義することができます。セレクタまたは要素を指定することができます。

このhtmlがある場合 .handler をソート開始のハンドルにします。

<ul class="sortable">
    <li>
        <span class="handle"></span>
        My element
    </li>
</ul>

このようにオプションを適用します。

$( ".sortable" ).sortable({ handle: '.handle' });

handle要素は好きなようにスタイルを設定できます。