onChoose и onUnchoose

SortableJS предоставляет гибкий механизм работы с интерактивными списками и элементами, позволяя отслеживать и управлять событиями перетаскивания. Среди множества событий особое место занимают onChoose и onUnchoose, которые используются для отслеживания момента, когда элемент становится выбранным для перетаскивания и когда выбор отменяется.

Событие onChoose

Назначение Событие onChoose срабатывает в момент, когда пользователь начинает выбор элемента для перетаскивания. Оно позволяет выполнять действия, связанные с началом взаимодействия, например, подсветку выбранного элемента, активацию визуальных индикаторов или сохранение состояния выбранного объекта.

Синтаксис

new Sortable(el, {
    onChoose: function (evt) {
        // evt.item — элемент, который был выбран
        // evt.from — контейнер, из которого выбран элемент
    }
});

Параметры события

  • evt.item — DOM-элемент, который был выбран для перетаскивания.
  • evt.from — родительский контейнер выбранного элемента.
  • evt.clone — клон элемента, если включена опция pullClone.
  • evt.oldIndex — индекс элемента в исходном контейнере до выбора.

Примеры использования

  • Добавление CSS-класса для выделения элемента:
onChoose: function(evt) {
    evt.item.classList.add('selected');
}
  • Логирование информации о выбранном элементе:
onChoose: function(evt) {
    console.log('Выбран элемент:', evt.item.textContent);
}

onChoose вызывается только один раз при начальном выборе элемента, до начала фактического перетаскивания. Это делает его идеальным для подготовки интерфейса к взаимодействию.

Событие onUnchoose

Назначение Событие onUnchoose срабатывает, когда выбор элемента отменяется без завершения перемещения. Причинами могут быть:

  • отмена действия пользователем (отпускание мыши вне списка),
  • нажатие клавиши отмены,
  • программная отмена перетаскивания через API.

Синтаксис

new Sortable(el, {
    onUnchoose: function (evt) {
        // evt.item — элемент, у которого отменили выбор
        // evt.from — контейнер, из которого отменили выбор
    }
});

Параметры события

  • evt.item — элемент, выбор которого был отменён.
  • evt.from — родительский контейнер.
  • evt.oldIndex — индекс элемента в контейнере до отмены выбора.

Примеры использования

  • Удаление класса выделения:
onUnchoose: function(evt) {
    evt.item.classList.remove('selected');
}
  • Восстановление исходного состояния интерфейса:
onUnchoose: function(evt) {
    console.log('Выбор элемента отменён:', evt.item.textContent);
}

onUnchoose особенно полезно для очистки временных изменений интерфейса, внесённых при onChoose. В отличие от onEnd, это событие не зависит от фактического завершения перетаскивания, оно фиксирует именно отказ от действия.

Взаимодействие onChoose и onUnchoose

Эти события часто применяются совместно для создания полного цикла визуальной и логической обработки выбора элемента:

  • Выбор элемента: onChoose активирует визуальные маркеры и сохраняет состояние.
  • Отмена выбора: onUnchoose снимает визуальные эффекты и возвращает элемент к исходному состоянию.

Пример интеграции:

new Sortable(list, {
    onChoose: function(evt) {
        evt.item.style.backgroundColor = 'lightblue';
    },
    onUnchoose: function(evt) {
        evt.item.style.backgroundColor = '';
    }
});

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

Особенности и тонкости

  1. onChoose срабатывает до начала перетаскивания, тогда как onStart срабатывает в момент фактического начала движения.

  2. onUnchoose может сработать даже при неудачном выборе, когда элемент не покидает контейнер.

  3. Эти события полезны для:

    • визуальной подсветки выбранных элементов,
    • подготовки данных для последующих операций,
    • предотвращения нежелательных действий, если выбор отменён.

  4. Важно различать onUnchoose и onEnd: первое фиксирует отмену выбора, второе — завершение перетаскивания (успешного или нет).

Использование onChoose и onUnchoose позволяет создавать интерфейсы с чёткой и предсказуемой логикой выбора элементов, обеспечивая точное управление состоянием элементов в интерактивных списках.

Оглавление