web-dev-qa-db-ja.com

JQuery UI-ソート可能：ソート可能要素内のアイコン「ハンドル」によるドラッグ

Jquery ui sortablesはうまく機能していますが、私のsortable要素には他のインタラクティブな要素が含まれています。並べ替え可能なdiv内の要素とやり取りするときに誤って並べ替えるのを防ぐために、並べ替え可能な内の特定の要素（「移動」アイコンなど）をドラッグする場合にのみ、並べ替え可能な要素のドラッグ移動が発生するようにします各ソート可能の左上隅に。これは一般的なjquiで可能ですか、それとも自分のフックを書く必要がありますか？

jquery-uiuser-interfaceinterfacewebjquery-ui-sortable
70
Rimer

プラグインのオプションhandleを使用すると、ソートを開始できる要素を定義できます。セレクターまたは要素を提供できます。

このhtmlがある場合、.handlerは、ソートを開始するハンドルです。

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

次のようなオプションを適用します。

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

ハンドル要素は好きなようにスタイルできます。

143
Didier Ghys