jquery .sortable() on <div>

Question

I am trying to let user sort this kind of markup

<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> 

And i am trying like this:

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

But i am getting very unexpected behavior, please check:

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

how can i do it to only let user sort by the step number? (but sort the whole item as a block)

Answer 1

I believe the following fiddle is what you're after: http://jsfiddle.net/GA4Qs/13/

jQuery sortable needs to be applied to the parent element containing the elements you want to be sorted.

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

Also you didn't close your divs in the right place.

<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> 

Not

<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">