Как реализовать данный функционал?

Всем привет, я изучаю программирование и пытаюсь повторить функционал при выборе изображения на сайт. Как сделать так, чтобы изображение не могло полностью выйти из голубого прямоугольника и при соприкосновении верхней границы фото с верхней границей прямоугольника (если изображение пользователь тянет вертикально вниз) перемещение останавливалось (аналогично и с нижними гранями). Я пробовал и с координатами, и маркеры на грани ставил, но изображение если и реагирует на грани, то калично. Заранее спасибо