LETUNOFF DOCS

HTML. Drag & drop

🧱 Суть

effectAllowed и dropEffect – это часть HTML5 Drag & Drop API, которые определяют, что можно делать при перетаскивании и что реально произойдёт.

  • effectAllowed → ограничения со стороны источника
  • dropEffect → действие в зоне дропа

📦 Проблема

1. Путают роли свойств

Оба свойства выглядят похоже, но делают разное:

  • одно задаёт разрешение
  • второе – фактическое действие
    Из-за этого часто возникает ощущение, что одно из них “не работает”.

2. Drop может не сработать

Если забыть:

e.preventDefault();

в dragover, браузер просто запретит drop.

3. Несовпадение значений

Если:

effectAllowed = 'move'
dropEffect = 'copy'

браузер может:

  • показать 🚫 курсор
  • не дать выполнить drop
Разница
СвойствоГде задаётсяЧто означает
effectAlloweddragstartКакие операции вообще разрешены
dropEffectdragoverЧто произойдёт именно здесь

✅ Решение

Использовать оба свойства согласованно:

  • источник → разрешает действие
  • зона дропа → подтверждает его

💻 Код

Источник (dragstart)

event.dataTransfer!.effectAllowed = 'move';

Зона дропа (dragover)

e.preventDefault(); // обязательно
e.dataTransfer!.dropEffect = 'move';

🎯 Вывод

  • effectAllowed – задаёт “правила игры”
  • dropEffect – говорит, что произойдёт в конкретной точке
  • они должны совпадать
  • без preventDefault drop не работает
  • чаще всего используется move для реального переноса

🔗 Связано

Обратные ссылки