Jquery.sortable() в <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>

И я пробую вот так:

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

Но я получаю очень неожиданное поведение, пожалуйста, проверьте:

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

как я могу сделать это, чтобы разрешить пользователю сортировать по номеру шага? (но отсортировать весь элемент как блок)

Ответ 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

Вы поворачиваете .sort в сортировку, когда .sortable() следует вызывать в контейнере элементов, которые вы хотите сортировать. Что делает ваш код, так это создание 5 отдельных отсортированных списков.

Переключитесь на выбор на основе родительского контейнера, и он работает:

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

Ответ 3

Этот работает для меня отлично. Я изменил селектор на использование имени класса "nubeT"

$(function() {

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

});

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