<div> 上的 jquery .sortable()答案

【问题标题】：jquery .sortable() on <div><div> 上的 jquery .sortable()
【发布时间】：2012-03-28 10:23:54
【问题描述】：

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

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

我怎样才能只让用户按步数排序？（但将整个项目排序为一个块）

【问题讨论】：

标签： jquery jquery-ui html jquery-ui-sortable

【解决方案1】：

我相信以下小提琴是您所追求的：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">

【讨论】：

【解决方案2】：

当 .sortable() 应该在要排序的项目的容器上调用时，您正在将 .sort 转换为可排序的。您的代码所做的是创建 5 个单独的可排序列表。

切换到基于父容器的选择，就可以了：

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

【讨论】：

【解决方案3】：

这个对我来说很好用。我将您的选择器更改为使用类名“nubeT”

$(function() {

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

});

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

【讨论】：