jquery .sortable() on <div>

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/

我该如何让用户仅按步骤号排序？（但是将整个项目作为一个块进行排序）

- Toni Michel Caubet

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

- Leonard Garvey

Answer 2

您正在把 .sort 转换为可排序的内容，但应该在要排序的项目的容器上调用 .sortable() 方法。您的代码创建了 5 个单独的可排序列表。

请改为基于父容器进行选择，即可正常工作： http://jsfiddle.net/vRCp8/1/

- Magneon

Answer 3

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

$(function() {

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

});​

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

- Shyju