jquery .sortable（）on< div> [英] jquery .sortable() on <div>

问题描述

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

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

我正在尝试这样做：

<$ （）; $ p> $（'。sort'）。sortable（{placeholder：ui-state-highlight，helper：'clone'}）。disableSelection（）;


但是我收到非常意外的行为，请检查：

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

我该怎么做才让用户按步数排序？ （但将整个项目排序为一个块）

解决方案

我相信下面的小提琴就是你所追求的： http://jsfiddle.net/GA4Qs/13/

jQuery可排序需求应用于包含要排序的元素的父元素。

  $（'＃psP'）。sortable（{placeholder：ui-state-highlight，helper：'clone' }）; 
  

您也没有在正确的位置关闭您的div。

 < div style =position：relative;类= 排序 > 
< span class =stepNum inset> 1< / span> 
< / textarea>< / textarea>< / textarea> 
< / div> 
  

不是

 < div style =position：relative;类= 排序 > 
< span class =stepNum inset> 1< / span> 
< / textarea>< / textarea>< / textarea> 
< div style =position：relative;类= 排序 > 
  

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)

解决方案

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

这篇关于jquery .sortable（）on&lt; div&gt;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！