Метод 1: использование опции «отмена».
В jQuery UI Sortable предусмотрена опция «отмена», которая позволяет нам указывать элементы, которые следует исключить из сортировки. Мы можем использовать селекторы CSS для выбора определенных дочерних элементов и предотвращения их сортировки.

Пример кода:

$("#sortable-container").sortable({
  cancel: ".disable-sort"
});

Объяснение:
В приведенном выше примере кода у нас есть сортируемый контейнер с идентификатором «sortable-container». Дочерние элементы, сортировку которых следует отключить, имеют класс «disable-sort». Указав селектор CSS «.disable-sort» в опции «Отмена», мы предотвращаем сортировку этих элементов.

Метод 2: использование опции «items».
Другой подход — использовать опцию «items», предоставляемую jQuery UI Sortable. Эта опция позволяет нам определить, какие дочерние элементы следует считать сортируемыми. Исключая определенные дочерние элементы, мы фактически отключаем для них сортировку.

Пример кода:

$("#sortable-container").sortable({
  items: "> li:not(.disable-sort)"
});

Объяснение:
В приведенном выше примере кода мы используем параметр «items», чтобы указать, что только <li>элементы, не имеющие класса «disable-sort», должны быть сортируемыми. Это предотвращает сортировку дочерних элементов с классом «disable-sort».

Метод 3: использование опции «handle».
Опция «handle» в jQuery UI Sortable позволяет нам определить конкретный элемент внутри сортируемого контейнера, который пользователи могут использовать для инициирования перетаскивания и сортировки. Исключив дочерние элементы из дескриптора, мы фактически отключаем их сортировку.

Пример кода:

$("#sortable-container").sortable({
  handle: ".sortable-handle"
});

Объяснение:
В приведенном выше примере кода мы используем параметр «handle», чтобы указать, что только элементы класса «sortable-handle» могут использоваться в качестве маркеров для сортировки. Не включая этот класс в дочерние элементы, мы отключаем для них сортировку.

В этой статье мы рассмотрели три различных метода отключения сортировки дочерних элементов в jQuery UI Sortable. Используя опцию «Отмена», опцию «Элементы» или опцию «Обработка», мы можем добиться желаемого поведения. В зависимости от ваших конкретных требований и структуры вашего HTML вы можете выбрать наиболее подходящий для вас метод.

Помните, что освоение jQuery UI Sortable дает вам больший контроль над пользовательским интерфейсом ваших веб-приложений, повышая общее удобство использования.