title: jquery .sortable() on <div>
body: <p>I am trying to let user sort this kind of markup</p>
  
  <pre><code>&lt;div id="steps"&gt;
     &lt;div class="sort"&gt;
         &lt;span&gt;&lt;/span&gt;
         &lt;textarea/&gt;
     &lt;/div&gt;
     &lt;div class="sort"&gt;
         &lt;span&gt;&lt;/span&gt;
         &lt;textarea/&gt;
     &lt;/div&gt;
     &lt;div class="sort"&gt;
         &lt;span&gt;&lt;/span&gt;
         &lt;textarea/&gt;
     &lt;/div&gt;
     &lt;div class="sort"&gt;
         &lt;span&gt;&lt;/span&gt;
         &lt;textarea/&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And i am trying like this:</p>
  
  <pre><code>$('.sort').sortable({placeholder: "ui-state-highlight",helper:'clone'}).disableSelection();
  </code></pre>
  
  <p>But i am getting very unexpected behavior, please check:</p>
  
  <p><a href="http://jsfiddle.net/GA4Qs/8/" rel="noreferrer">http://jsfiddle.net/GA4Qs/8/</a></p>
  
  <p>how can i do it to only let user sort by the step number? (but sort the whole item as a block)</p>