Логирование событий

SortableJS — мощная библиотека для реализации перетаскивания элементов на веб-странице. Одним из ключевых аспектов работы с динамическими списками является отслеживание действий пользователя и фиксация изменений через события. SortableJS предоставляет богатый набор событий, которые можно использовать для логирования и последующего анализа.

Основные события

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

  • start — срабатывает в момент начала перетаскивания элемента.
  • end — фиксирует завершение перетаскивания.
  • add — возникает, когда элемент добавлен из другого списка.
  • update — фиксирует изменение позиции элемента внутри списка.
  • remove — срабатывает при удалении элемента из текущего списка.
  • sort — происходит при каждом изменении порядка элементов, даже во время перетаскивания.
  • filter — событие, вызываемое при попытке перетащить элемент, запрещённый для перемещения.

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

Настройка логирования

Для регистрации событий используется опция on при инициализации Sortable:

const list = document.getElementById('sortable-list');

const sortable = new Sortable(list, {
    animation: 150,
    onStart: function (evt) {
        console.log(`Начато перемещение элемента: ${evt.item.textContent}`);
    },
    onEnd: function (evt) {
        console.log(`Завершено перемещение элемента с индекса ${evt.oldIndex} на ${evt.newIndex}`);
    },
    onAdd: function (evt) {
        console.log(`Элемент добавлен из другого списка: ${evt.item.textContent}`);
    },
    onUpdate: function (evt) {
        console.log(`Элемент перемещён внутри списка с индекса ${evt.oldIndex} на ${evt.newIndex}`);
    }
});

Ключевые моменты при логировании:

  1. evt.item — DOM-элемент, который перемещается.
  2. evt.oldIndex — исходная позиция элемента в списке.
  3. evt.newIndex — новая позиция элемента после перемещения.
  4. evt.from и evt.to — исходный и целевой списки при работе с несколькими списками.

Продвинутое логирование

Для полноценного отслеживания действий пользователей можно использовать структурированное логирование, отправляя данные на сервер или сохраняя в локальное хранилище:

function logEvent(evt, type) {
    const logEntry = {
        type: type,
        item: evt.item.textContent,
        oldIndex: evt.oldIndex,
        newIndex: evt.newIndex,
        fromListId: evt.from.id,
        toListId: evt.to.id,
        timestamp: new Date().toISOString()
    };
    console.log(JSON.stringify(logEntry));
}

const sortable = new Sortable(document.getElementById('sortable-list'), {
    animation: 200,
    onStart: evt => logEvent(evt, 'start'),
    onEnd: evt => logEvent(evt, 'end'),
    onAdd: evt => logEvent(evt, 'add'),
    onUpdate: evt => logEvent(evt, 'update'),
    onRemove: evt => logEvent(evt, 'remove')
});

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

Взаимодействие с несколькими списками

При работе с несколькими списками важно различать события from и to. Например, перемещение элемента из одного списка в другой требует фиксации исходного и конечного списка, а также индексов:

onAdd: function(evt) {
    console.log(`Элемент "${evt.item.textContent}" перемещён из списка "${evt.from.id}" в список "${evt.to.id}" на позицию ${evt.newIndex}`);
}

Это позволяет не только логировать изменения, но и поддерживать синхронизацию данных между списками.

Оптимизация логирования

Логирование всех событий может создавать высокую нагрузку при больших списках. Для оптимизации:

  • Использовать фильтры на стороне клиента, записывая только ключевые события (update, add, remove).
  • Группировать события с одинаковыми параметрами для сокращения объёма данных.
  • При отправке на сервер использовать пакетную отправку (batch) вместо отправки каждого события отдельно.

Применение в аналитике

Логирование событий SortableJS позволяет:

  • Отслеживать пользовательское поведение при работе с интерфейсом.
  • Вести историю изменений списка для восстановления состояния.
  • Интегрировать динамические списки с внешними системами (например, базы данных или аналитические сервисы).

Благодаря гибкой архитектуре событий SortableJS обеспечивает детальный контроль и позволяет реализовать как простое, так и расширенное логирование с минимальными затратами кода.

Оглавление