Jquery ui - triable : glisser par la "poignée" de l'icône dans l'élément triable

Question

J'ai des éléments triables jquery ui qui fonctionnent bien mais mes éléments triables contiennent d'autres éléments interactifs. Afin d'éviter tout tri accidentel lors de l'interaction avec les éléments contenus dans les divs triables, j'aimerais faire en sorte que le mouvement de déplacement des éléments triables ne se produise que lorsqu'on fait glisser un certain élément à l'intérieur de l'élément triable, comme une icône de déplacement qui pourrait se trouver dans le coin supérieur gauche de chaque élément triable. Est-ce possible avec le jqui générique, ou dois-je écrire mon propre hook ?

Answer 1

L'option poignée du plugin vous permet de définir quel est l'élément qui peut initier le tri. Vous pouvez fournir un sélecteur ou un élément.

Si vous avez ce html, avec le .handler pour être la poignée pour commencer le tri :

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

Appliquez l'option comme suit :

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

Vous pouvez donner à votre élément de poignée le style que vous souhaitez.