Как-то странно вы говорите 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. СУХОЙ, пусть компьютер повторяет.