Interface utilisateur Jquery - triable: faites glisser l'icône "poignée" dans l'élément triable

Question

J'ai jquery ui sortables fonctionnant bien mais mes éléments triables ont d'autres éléments interactifs en leur sein. Afin d'éviter un tri accidentel lors de l'interaction avec les éléments des divisions triables, j'aimerais que le mouvement de déplacement des triables ne se produise que lorsque vous faites glisser un certain élément dans le triable, comme une icône de déplacement qui pourrait résider. dans le coin supérieur gauche de chaque triable. Est-ce possible avec jqui générique, ou aurais-je besoin d'écrire mon propre hook?

Answer 1

L'option handle du plugin vous permet de définir que c'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 le handle pour commencer le tri:

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

Appliquez l'option comme ceci:

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

Vous pouvez personnaliser votre élément de poignée comme bon vous semble.