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/

我怎样才能让用户按步骤编号排序？（但将整个项目排序为块）

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

Answer 2

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

切换到基于父容器的选择，它可以工作：

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

Answer 3

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

$(function() {

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

});

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

<div> </div>上的jquery .sortable（）

3 个答案: