Как-то странно вы говорите SCSS, когда вы его не используете, а то, что там есть, будет работать как обычный CSS.
Меня беспокоит количество идентификаторов ни за что, использование атрибутов onevent в разметке для того, что должно быть добавлено через addEventListener из скриптов, абзацы вокруг незавершенных мыслей, дизайн пиксельной метрики, отсутствие необязательного атрибута alt и т. д. и Т. Д.
Это приводит к тому, что 1,38 КБ разметки выполняют работу около 900 байт. Когда половина результирующего переписываемого кода приходится на URI, это нехороший знак.
Я имею в виду, что нужно взять верхнюю область, убрать весь хлам и придать ей правильную семантику.
<ul id="dropZone"> <li>Fish</li> <li>Mouse</li> <li>Cat</li> <li>Dog</li> </ul>
Затем подключите свой сценарий.
for (let li of document.querySelectorAll('#dropzone li')) { li.addEventListener('drop', drop, false); li.addEventListener('dragover', allowDrop, false); }
Не засоряйте разметку устаревшим устаревшим мусором onevent. СУХОЙ, пусть компьютер повторяет.