@Azimut_Neva

Jquery ui sortable, как запретить сортировку внутри блока?

<script>
  $(function() {
    $( "#sortable1, #sortable2, #sortable3, #sortable4, #sortable5" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  });
  </script>
</head>
<body>
 
<table >
<tbody id="sortable1" class="connectedSortable">
  <tr class="ui-state-default"><td>Item 1</td></tr>
  <tr class="ui-state-default"><td>Item 2</td></tr>
  <tr class="ui-state-default"><td>Item 3</td></tr>
  <tr class="ui-state-default"><td>Item 4</td></tr>
  <tr class="ui-state-default"><td>Item 5</td></tr>
  <tr><td></td></tr>
</tbody>
<tbody id="sortable2" class="connectedSortable">
  <tr class="ui-state-highlight"><td>Item 1</td></tr>
  <tr class="ui-state-highlight"><td>Item 2</td></tr>
  <tr class="ui-state-highlight"><td>Item 3</td></tr>
  <tr class="ui-state-highlight"><td>Item 4</td></tr>
  <tr class="ui-state-highlight"><td>Item 5</td></tr>
  <tr><td></td></tr>
</tbody>
<tbody id="sortable3" class="connectedSortable">
  <tr class="ui-state-wer"><td>Item 1</td></tr>
  <tr class="ui-state-wer"><td>Item 2</td></tr>
  <tr class="ui-state-wer"><td>Item 3</td></tr>
  <tr class="ui-state-wer"><td>Item 4</td></tr>
  <tr class="ui-state-wer"><td>Item 5</td></tr>
  <tr><td></td></tr>
</tbody>
<tbody id="sortable4" class="connectedSortable">
  <tr class="ui-state-highlight"><td>Item 1</td></tr>
  <tr class="ui-state-highlight"><td>Item 2</td></tr>
  <tr class="ui-state-highlight"><td>Item 3</td></tr>
  <tr class="ui-state-highlight"><td>Item 4</td></tr>
  <tr class="ui-state-highlight"><td>Item 5</td></tr>
  <tr><td></td></tr>
</tbody>
<tbody id="sortable5" class="connectedSortable">
  <tr class="ui-state-highlight"><td>Item 1</td></tr>
  <tr class="ui-state-highlight"><td>Item 2</td></tr>
  <tr class="ui-state-highlight"><td>Item 3</td></tr>
  <tr class="ui-state-highlight"><td>Item 4</td></tr>
  <tr class="ui-state-highlight"><td>Item 5</td></tr>
  <tr><td></td></tr>
</tbody>
</ul>


Как сделать чтобы сортировка шла только по столбцам, т.е. порядок сортировки внутри столбца не менялся и когда перетаскиваю элемент в новый столбец, он уходил вниз этого столбца. Спасибо, выручайте, натолкните на мысль.
  • Вопрос задан
  • 152 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
let list = null;

$('.connectedSortable').sortable({
  connectWith: '.connectedSortable',
  over(e, ui) {
    list = this;
  },
  stop(e, ui) {
    if (list === this) {
      e.preventDefault();
    }
  },
  receive(e, ui) {
    $(this).append(ui.item);
  },
});
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы