JQuery Сортировка по строкам Bootstrap

Question

У меня есть некоторый бутстрап HTML, есть две строки.

В верхней строке есть два div в разных столбцах, они сортируются и работают без проблем.

Проблема в том, что я не могу получить вторую строку для сортировки с первой строкой. Другими словами, мне нужен способ сделать div внутри строк 1 и 2 отсортированными между собой. (Перетащите DIV из строки 1 к строке 2)

Вы можете видеть, что 1 и 2 являются сортировкой, но не с другими (3 и 4) в этом jsfiddle: http://jsfiddle.net/CsFpn/3/

<div class="row"> 
    <div id="sortable"> 
     <div class="col-md-6"> 
      <div class="c1" id="c1">1</div> 
     </div> 

     <div class="col-md-6"> 
      <div class="c2" id="c2">2</div> 
     </div> 
    </div> 
</div> 

<div class="row"> 
    <div id="sortable"> 
     <div class="col-md-6"> 
      <div class="c3" id="c3">3</div> 
     </div> 

     <div class="col-md-6"> 
      <div class="c4" id="c4">4</div> 
     </div> 
    </div> 
</div> 

Answer 1

Есть пара проблем с вашим кодом. Во-первых, идентификаторы HTML должны быть уникальными. Во-вторых, вам нужно соединить сортировки вместе, как показано в this jQuery sortable example.

Я раздвоенный свой jsfiddle, чтобы продемонстрировать, как заставить его работать: http://jsfiddle.net/puh2r3vn/

HTML:

<div class="row"> 
    <div id="sortable1" class="connectedSortable"> 
     <div class="col-md-6"> 
      <div class="c1" id="c1">1</div> 
     </div> 
     <div class="col-md-6"> 
      <div class="c2" id="c2">2</div> 
     </div> 
    </div> 
</div> 
<div class="row"> 
    <div id="sortable2" class="connectedSortable"> 
     <div class="col-md-6"> 
      <div class="c3" id="c3">3</div> 
     </div> 
     <div class="col-md-6"> 
      <div class="c4" id="c4">4</div> 
     </div> 
    </div> 
</div> 

JavaScript:

$(function() { 
    $("#sortable1, #sortable2").sortable({ 
     connectWith: ".connectedSortable" 
    }).disableSelection(); 
}); 

Answer 2

Вы должны вызвать .sortable() на элемент контейнера (который не указан в вашем примере) и установите items вариант .col-md-6.

Чем вы должны использовать событие change, чтобы перегруппировать элементы между строками, если во время сортировки возникает change.

Используя разметку было бы:

(я изменил два id="sortable" к class="sortable")

<script> 
    $(function() { 
     $('.container').sortable({ 
      items: '.col-md-6', 
      change: function(e, ui) { 
       // Rearrange your columns between rows here 
      } 
     }); 
    }); 
</script> 

<div class="container"> 
    <div class="row"> 
     <div class="sortable"> 
      <div class="col-md-6"> 
       <div class="c1" id="c1">1</div> 
      </div> 

      <div class="col-md-6"> 
       <div class="c2" id="c2">2</div> 
      </div> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="sortable"> 
      <div class="col-md-6"> 
       <div class="c3" id="c3">3</div> 
      </div> 

      <div class="col-md-6"> 
       <div class="c4" id="c4">4</div> 
      </div> 
     </div> 
    </div> 
</div>