<div> 上的 jquery .sortable()

Question

我试图让用户对这种标记进行排序

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

我正在尝试这样:

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

但是我得到了非常意外的行为，请检查:

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

我怎样才能只让用户按步数排序？ (但将整个项目排序为一个 block )

Answer 1

我相信以下 fiddle 就是您所追求的:http://jsfiddle.net/GA4Qs/13/

jQuery sortable 需要应用于包含你要排序的元素的父元素。

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

此外，您没有在正确的位置关闭 div。

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

不是

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