Типичные ошибки и их решения

1. Элементы не перетаскиваются

Симптомы: При попытке перетащить элемент он остаётся на месте, курсор мыши изменяется, но движение не происходит.

Причины и решения:

  • Неправильный выбор контейнеров. Dragula работает с массивом контейнеров, в которых находятся перетаскиваемые элементы. Если контейнер не указан или указан некорректно, библиотека не инициализируется. Исправление: Проверить правильность селекторов контейнеров:

    const drake = dragula([document.querySelector('#left'), document.querySelector('#right')]);

  • CSS-свойства блокируют перетаскивание. Элементы с pointer-events: none или фиксированными позициями могут игнорироваться. Исправление: Убедиться, что перетаскиваемые элементы доступны для взаимодействия и имеют корректные position и display.

2. Перетаскивание срабатывает, но элемент возвращается на место

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

Причины и решения:

  • Отсутствие разрешения на перемещение между контейнерами. Dragula по умолчанию разрешает перемещение между любыми контейнерами, но если используется функция accepts или moves, неправильно настроенные условия могут блокировать перемещение.

    Пример правильной настройки accepts:

    const drake = dragula([leftContainer, rightContainer], {
    accepts: function(el, target, source, sibling) {
        return target.id !== 'restricted';
    }
});

  • Стили CSS или библиотечные ограничения. Высота контейнера или overflow могут препятствовать корректной вставке элемента. Проверка размеров и отступов часто решает проблему.

3. Ошибка “Cannot read property ‘addEventListener’ of null”

Симптомы: В консоли возникает ошибка при инициализации Dragula, особенно при использовании селекторов через document.querySelector.

Причины и решения:

  • Элемент ещё не загружен в DOM. Скрипт вызывается до того, как элемент существует. Исправление: Оборачивать инициализацию Dragula в событие DOMContentLoaded:

    document.addEventListener('DOMContentLoaded', function() {
    const drake = dragula([document.querySelector('#left'), document.querySelector('#right')]);
});

4. Некорректное отображение при перетаскивании

Симптомы: Элемент “скачет”, перекрывает другие элементы или исчезает при перетаскивании.

Причины и решения:

  • Отсутствие стилей для ghost-элемента. Dragula автоматически создает копию элемента при перетаскивании, но без стилей она может быть невидимой или иметь неправильные размеры. Решение: Добавить CSS для класса .gu-transit:

    .gu-transit {
    opacity: 0.8;
    border: 1px dashed #ccc;
}

  • Конфликт с внешними CSS-фреймворками. Иногда Bootstrap или Tailwind могут изменять position, z-index или overflow, нарушая визуализацию. Проверка и настройка этих свойств помогает.

5. Перетаскивание работает, но события не срабатывают

Симптомы: Dragula инициализирован, элементы перемещаются, но обработчики событий drop, drag или remove не вызываются.

Причины и решения:

  • Неправильная привязка событий. Важно использовать правильный объект drake:

    drake.on('drop', function(el, target, source, sibling) {
    console.log('Элемент перемещен', el);
});

  • Конфликт нескольких экземпляров Dragula. Несколько drake на одних и тех же контейнерах могут блокировать события. Рекомендуется использовать один экземпляр на уникальный набор контейнеров.

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

Симптомы: Элементы, добавленные после инициализации Dragula, не перетаскиваются.

Причины и решения:

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

    drake.containers.push(newContainer);

7. Ошибки при интеграции с фреймворками

Симптомы: При использовании React, Vue или Angular перетаскивание работает нестабильно: элементы “мигают”, теряются, события не вызываются.

Причины и решения:

  • Конфликт виртуального DOM. Dragula напрямую изменяет DOM, что не всегда согласуется с реактивным рендерингом. Решение:

    • Использовать хуки жизненного цикла (например, componentDidMount в React) для инициализации.
    • Обновлять состояние компонентов через события Dragula, а не полагаться на прямое DOM-изменение.

8. Невозможность отменить перетаскивание

Симптомы: Попытка вернуть элемент на исходное место или отменить операцию не работает.

Причины и решения:

  • Неправильное использование методов Dragula. Для отмены используется метод drake.cancel(true):

    drake.on('drag', function(el) {
    if (el.dataset.cancel === 'true') {
        drake.cancel(true);
    }
});

  • Стили или условия CSS не позволяют увидеть эффект. Убедиться, что контейнеры и ghost-элемент отображаются корректно.

9. Проблемы с мобильными устройствами

Симптомы: Перетаскивание на сенсорных устройствах либо не срабатывает, либо ведет себя нестабильно.

Причины и решения:

  • Dragula по умолчанию ориентирован на мышь. Для мобильных устройств требуется подключение polyfill для touch-событий, например dragula-touch.

  • CSS-свойства touch-action и user-select могут блокировать перетаскивание. Нужно добавить:

    .draggable {
    touch-action: none;
    user-select: none;
}

10. Потеря позиции после перезагрузки страницы

Симптомы: После обновления страницы все элементы возвращаются на исходные места.

Причины и решения:

  • Отсутствие хранения состояния. Dragula не сохраняет позиции элементов по умолчанию.

  • Решение: Использовать локальное хранилище или сервер для сохранения порядка элементов при событии drop:

    drake.on('drop', function(el, target) {
    const order = Array.from(target.children).map(child => child.id);
    localStorage.setItem('order', JSON.stringify(order));
});

    При загрузке страницы восстанавливать порядок элементов из сохраненных данных.

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

Оглавление