Передача данных в обработчики

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

События в Muuri работают по принципу подписки через метод on. Общий синтаксис выглядит так:

grid.on('eventName', function(item, event) {
    // тело обработчика
});
  • eventName — имя события (dragStart, dragReleaseEnd, filter, sort, move и др.).
  • item — объект Muuri.Item, на который ссылается событие.
  • event — объект стандартного события DOM (например, MouseEvent), если оно было инициировано пользователем.

Использование контекстных данных через объект item

Объект Muuri.Item содержит несколько ключевых свойств, которые можно использовать для передачи данных:

  • element — DOM-элемент, соответствующий элементу сетки.
  • getData() — возвращает объект данных, ассоциированных с элементом (см. ниже раздел про add и setData).
  • getIndex() — индекс элемента в текущей сетке.
  • isDragging() — возвращает true, если элемент в данный момент перетаскивается.

Пример использования данных элемента в обработчике события перетаскивания:

grid.on('dragStart', function(item) {
    const data = item.getData();
    console.log('Начало перетаскивания элемента:', data);
});

Здесь через item.getData() можно получить любые произвольные данные, которые были сохранены при создании элемента.

Передача пользовательских данных при создании элементов

При добавлении элементов в сетку через метод add можно сразу передать объект данных:

grid.add([
  { 
    element: document.getElementById('item1'), 
    id: 1, 
    content: 'Пример элемента'
  },
  { 
    element: document.getElementById('item2'), 
    id: 2, 
    content: 'Еще один элемент'
  }
]);

Для хранения этих данных в элементе используется метод setData:

const item = grid.getItem(element);
item.setData({
    id: 123,
    type: 'image',
    meta: { author: 'John Doe' }
});

После этого все обработчики, связанные с этим элементом, смогут использовать переданные данные через item.getData().

Передача дополнительных параметров в обработчики

Иногда требуется, чтобы обработчик получал не только item и event, но и дополнительные параметры из внешнего контекста. В этом случае удобно использовать замыкания:

function createHandler(customParam) {
    return function(item, event) {
        console.log('Пользовательский параметр:', customParam);
        console.log('Элемент:', item.getData());
    };
}

grid.on('dragReleaseEnd', createHandler('Секретная информация'));

Такой подход позволяет динамически передавать любые данные внутрь обработчиков без изменения API Muuri.

События фильтрации и сортировки с передачей данных

Для событий фильтрации (filter) и сортировки (sort) Muuri передает массив элементов и контекст действия:

grid.on('filter', function(items, filter) {
    console.log('Элементы после фильтрации:', items.map(i => i.getData()));
    console.log('Использованный фильтр:', filter);
});

grid.on('sort', function(items, sortBy) {
    console.log('Элементы после сортировки:', items.map(i => i.getData()));
    console.log('Критерий сортировки:', sortBy);
});
  • items — массив объектов Muuri.Item, прошедших фильтр или отсортированных.
  • filter / sortBy — параметр, который был передан в метод filter или sort.

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

Практическая схема передачи данных

  1. Создание элемента с данными: через add или setData.
  2. Подписка на события сетки: с использованием метода on.
  3. Использование item.getData() в обработчике для доступа к контекстной информации.
  4. Передача внешних параметров через замыкания для динамических значений.
  5. Обработка массивов элементов в событиях сортировки и фильтрации.

Эта структура позволяет интегрировать Muuri в сложные приложения, где каждый элемент содержит метаданные, используемые в UI и логике приложения.

Особенности передачи данных в drag-событиях

События перетаскивания (drag) в Muuri особенно удобны для передачи данных, так как они происходят на уровне отдельных элементов:

  • dragStart(item, event) — момент начала перетаскивания, можно блокировать перетаскивание по условию.
  • dragMove(item, event) — текущие координаты и состояние элемента во время движения.
  • dragReleaseStart(item, event) — перед отпусканием элемента, можно добавить анимации.
  • dragReleaseEnd(item, event) — элемент окончательно закреплен, данные можно сохранять в базе.

Пример передачи данных и реакции на перемещение элемента:

grid.on('dragReleaseEnd', function(item) {
    const data = item.getData();
    console.log(`Элемент ${data.id} перемещен на новую позицию ${item.getIndex()}`);
});

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

Синхронизация данных с внешними источниками

Для интеграции с серверной частью данные можно извлекать из item.getData() и отправлять через AJAX или WebSocket. Это гарантирует, что позиция и состояние элементов Muuri всегда соответствуют актуальному состоянию базы данных.

grid.on('dragReleaseEnd', function(item) {
    const data = item.getData();
    fetch('/update-position', {
        method: 'POST',
        body: JSON.stringify({ id: data.id, newIndex: item.getIndex() }),
        headers: { 'Content-Type': 'application/json' }
    });
});

Такой паттерн передачи данных позволяет строить сложные интерактивные интерфейсы с динамическими сетками, где каждый элемент связан с уникальной информацией и реагирует на действия пользователя.

Оглавление