web-dev-qa-db-fra.com

jquery .sortable () sur <div>

J'essaie de laisser l'utilisateur trier ce type de balisage

<div id="steps">
   <div class="sort">
       <span></span>
       <textarea/>
   </div>
   <div class="sort">
       <span></span>
       <textarea/>
   </div>
   <div class="sort">
       <span></span>
       <textarea/>
   </div>
   <div class="sort">
       <span></span>
       <textarea/>
   </div>
</div>

Et j'essaye comme ça:

$('.sort').sortable({placeholder: "ui-state-highlight",helper:'clone'}).disableSelection();

Mais je reçois un comportement très inattendu, veuillez vérifier:

http://jsfiddle.net/GA4Qs/8/

comment puis-je le faire pour ne laisser l'utilisateur trier que par numéro d'étape? (mais triez l'élément entier en bloc)

jqueryjquery-uihtmljquery-ui-sortable
33
Toni Michel Caubet

Je crois que le violon suivant est ce que vous recherchez: http://jsfiddle.net/GA4Qs/13/

jQuery triable doit être appliqué à l'élément parent contenant les éléments que vous souhaitez trier.

$('#psP').sortable({placeholder: "ui-state-highlight",helper:'clone'});

De plus, vous n'avez pas fermé vos divisions au bon endroit.

<div style="position: relative;" class="sortable">
        <span class="stepNum inset">1</span>
        <textarea placeholder="Escribe que hay que hacer en este paso" class="step valid"></textarea>
</div>

Ne pas

<div style="position: relative;" class="sortable">
        <span class="stepNum inset">1</span>
        <textarea placeholder="Escribe que hay que hacer en este paso" class="step valid"></textarea>
<div style="position: relative;" class="sortable">
27
Leonard Garvey

Vous transformez .sort en triable, alors que .sortable () doit être appelé sur le conteneur des éléments que vous souhaitez trier. Votre code crée cinq listes triables distinctes.

Passez à la sélection basée sur le conteneur parent, et cela fonctionne:

http://jsfiddle.net/vRCp8/1/

6
Magneon

Celui-ci fonctionne bien pour moi. J'ai changé votre sélecteur pour utiliser le nom de classe "nubeT"

$(function() {

    $('.nubeT').sortable({
        placeholder: "ui-state-highlight",
        helper: 'clone'
    });

});​

http://jsfiddle.net/GA4Qs/11/

1
Shyju