Доработка скрипта javascript - особенность drag'n'drop когда scale!=1

Есть страница и скрипты. В нашем примере на странице есть две области - одна зеленая внизу, и одна с пунктирной линией вверху. В этих областях при перетаскивании мышкой объекты ведут себя по-разному.
В зеленой области объекты выстраиваются внизу влево.
В пунктирной линии можно взять объект, переместить и оставить где угодно внутри этой области.

В целом всё работает как надо.
Ошибочное поведение именно в пунктирной области возникает, когда мы на странице нажимаем Zoom plus или Zoom minus. Когда масштаб изменен мы "хватаем" мышкой объект и он "убегает" из-под курсора мышки. В gif файле это продемонстрировано.
При этом в зеленом блоке более или менее работает точно.
В коде есть места, где расчет координат учитывает scale. Но для пунктирной области видимо не доработано.
Необходимо доработать так, что бы работало и в пунктирной и в зеленой области как при изменении масштаба, так и при обычном просмотре.

Во вложении скрин кусок пример кода и гиф с демонстрацией как из-под курсора уходит объект.
Исходный код после выбора исполнителя.

1) Главное реализовать то, что написано и чтобы ничего не сломалось. Т.е. чтобы не было так, что условие задачи выполнено, но при этом сломалось что-то другое.
2) Не нужно переписывать или предлагать переписывать код - внести исправления в существующий.