Множественные зоны сброса

В Interact.js управление перетаскиванием и обработкой зон сброса реализуется через интерфейс dropzone. Когда элемент может быть сброшен в несколько зон одновременно, важно понимать, как настроить приоритеты, обработчики и события, чтобы поведение было предсказуемым и удобным.

Определение множественных зон сброса

Каждая зона сброса создается вызовом interact(element).dropzone(options). В options указываются:

  • accept – CSS-селектор или функция, определяющая, какие элементы могут быть сброшены в эту зону.
  • overlap – величина пересечения (от 0 до 1), необходимая для срабатывания события drop.
  • ondropactivate, ondragenter, ondragleave, ondrop, ondropdeactivate – события, обеспечивающие полное управление процессом перетаскивания.

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

interact('.dropzone1').dropzone({
    accept: '.draggable',
    overlap: 0.5,
    ondragenter: function (event) {
        event.target.classList.add('highlight');
    },
    ondragleave: function (event) {
        event.target.classList.remove('highlight');
    },
    ondrop: function (event) {
        console.log('Элемент сброшен в dropzone1');
    }
});

interact('.dropzone2').dropzone({
    accept: '.draggable',
    overlap: 0.5,
    ondrop: function (event) {
        console.log('Элемент сброшен в dropzone2');
    }
});

Приоритет зон при пересечении

Когда перетаскиваемый элемент перекрывает несколько зон сброса, Interact.js определяет, какая зона будет активна, на основе следующих критериев:

  1. Порядок объявления dropzone – последняя зарегистрированная зона может иметь приоритет в событиях.
  2. Метод overlap – позволяет задать минимальный процент перекрытия, при котором срабатывает событие. Зоны с большим процентом перекрытия получают приоритет.
  3. Функция accept – позволяет исключить ненужные элементы из зоны и избежать конфликтов.
interact('.dropzone3').dropzone({
    accept: '.special',
    overlap: 0.75,
    ondrop: function (event) {
        console.log('Элемент сброшен в dropzone3 с высоким приоритетом');
    }
});

В этом примере .dropzone3 принимает только элементы с классом .special и срабатывает, если перекрытие превышает 75%. Остальные зоны игнорируются при выполнении этих условий.

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

Interact.js предоставляет пять основных событий, связанных с dropzone:

  • ondropactivate – срабатывает при начале перетаскивания, активирует все зоны сброса.
  • ondragenter – срабатывает, когда элемент входит в зону. Можно использовать для подсветки.
  • ondragleave – срабатывает при выходе элемента из зоны.
  • ondrop – фиксирует момент, когда элемент отпущен в зоне.
  • ondropdeactivate – завершающее событие после сброса или отмены перетаскивания.

При множественных зонах важно различать попадание элемента в несколько зон и фактический drop. Для этого рекомендуется использовать проверку event.relatedTarget и методы interact.isSet() для управления состояниями.

function highlightZone(event) {
    event.target.classList.add('active-dropzone');
}

function removeHighlight(event) {
    event.target.classList.remove('active-dropzone');
}

interact('.dropzone').dropzone({
    accept: '.draggable',
    overlap: 0.5,
    ondragenter: highlightZone,
    ondragleave: removeHighlight,
    ondrop: function(event) {
        console.log('Элемент сброшен в активную зону');
        removeHighlight(event);
    }
});

Динамическое управление множественными зонами

Interact.js позволяет добавлять или удалять зоны сброса на лету, что особенно важно при сложных интерфейсах с множественными контейнерами.

// Создание динамической зоны
let newZone = document.createElement('div');
newZone.classList.add('dropzone');
document.body.appendChild(newZone);

interact(newZone).dropzone({
    accept: '.draggable',
    overlap: 0.6,
    ondrop: function(event) {
        console.log('Динамическая зона обработала drop');
    }
});

Удаление зоны сброса осуществляется с помощью метода unset():

interact('.dropzone-to-remove').unset();

Это полностью отключает dropzone и снимает все события.

Советы по оптимизации

  • Для больших интерфейсов рекомендуется группировать зоны и использовать общие обработчики событий, чтобы уменьшить количество отдельных функций.
  • Настройка точного overlap позволяет минимизировать случайные срабатывания при пересечении зон.
  • Использование accept с функцией вместо селектора CSS даёт максимальную гибкость для сложных правил.
interact('.dropzone').dropzone({
    accept: function(draggableElement) {
        return draggableElement.dataset.type === 'allowed';
    },
    overlap: 0.7
});

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

Заключение по множественным зонам

Работа с множественными dropzone в Interact.js требует внимательной настройки приоритета, событий и условий overlap. Правильная комбинация accept, overlap и централизованных обработчиков позволяет создавать сложные интерфейсы перетаскивания без конфликтов между зонами.

Оглавление