jquery .sortable () для <div> - PullRequest
Новая
       2

jquery .sortable () для <div>

33 голосов
/ 12 марта 2012

Я пытаюсь разрешить пользователю сортировать такую ​​разметку 

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

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

Ответы [ 3 ]

27 голосов
/ 12 марта 2012

Я считаю, что вы ищете следующую скрипку: http://jsfiddle.net/GA4Qs/13/

jQuery sortable необходимо применить к родительскому элементу, содержащему элементы, которые вы хотите отсортировать. 

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

Также вы не закрыли свои деления в нужном месте. 

<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">
6 голосов
/ 12 марта 2012

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

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

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

1 голос
/ 12 марта 2012

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

$(function() {

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

});​

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

...