Задать вопрос
@Azimut_Neva
javascript

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>


Как сделать чтобы сортировка шла только по столбцам, т.е. порядок сортировки внутри столбца не менялся и когда перетаскиваю элемент в новый столбец, он уходил вниз этого столбца. Спасибо, выручайте, натолкните на мысль.
  • Вопрос задан
  • 167 просмотров
Комментировать
Подписаться 1 Средний Комментировать
Решения вопроса 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);
  },
});
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Внесение изменений в Open Source Delphi программу
27 нояб. 2024, в 23:27
8000 руб./за проект
Создать многостраничный дизайн WEB-приложения (сайта) в бьюти-сфере
27 нояб. 2024, в 22:29
50000 руб./за проект
Разработать приложение для Android и IOS
27 нояб. 2024, в 21:14
70000 руб./за проект
Ещё заказы