Как реализовать передвижение картинки внутри блока?

Дан блок с фиксированной шириной и высотой. Внутри блока картинка, с размером более, чем родитель. Как реализовать передвижение этой картинки внутри блока без полос прокрутки?
Результат:  эффект перемещения (Drag) картинки схожий с перемещением как на картах. В примере используются: main_div как родительский элемент, а "Info_Rectangle" как дочерний элемент.
.Info_Rectangle { height:1065px; background: blue; position: absolute; width: 1065px; z-index: 0; font-size: 70px; } .main_div{ width:900px; height:900px; }

P.S. Как создать подобный эффект без jquery?

Ответ

Полчаса писал вчера вам содержательный ответ, соорудил большой и красивый пример, а вдруг "вы не можете опубликовать ответ, так как вопрос был удален". Обидно, однако. Не делайте так больше.
Хорошо, что я писал ответ на jsfiddle в своем аккаунте: https://jsfiddle.net/ipshenicyn/480gg35o/ Код рабочего примера с jsfiddle ниже (сниппеты здесь шалят второй день, поэтому пока plaintext).
По вопросу "нужна ли JQ UI": смотрите сами. Если вопрос только в простом перетаскивании этой картинки и вам подойдет мой код - нет нужды подключать жирную и медленную либу.
HTML

CSS
.box{ width: 500px; height: 500px; border: 30px solid green; background-color: white; overflow: hidden; } .box img{ cursor: move; position: relative; }
JS
$(function(){ var drag = false; $("#src").on('mousedown', function(e){ drag = true; }).on('mouseup mouseout', function(){ $(this).data({ startX: 0, startY: 0, }); drag = false; }).on('mousemove', function(e){ e.preventDefault(); if(drag){ console.log($(this).data(),e); var left = parseInt($(this).css('left')) || 0, top = parseInt($(this).css('top')) || 0, newLeft = left + (e.clientX - ($(this).data().startX || e.clientX)), newTop = top + (e.clientY - ($(this).data().startY || e.clientY)), parentHeight = $(this).parent().height(), parentWidth = $(this).parent().width(), imgHeight = $(this).height(), imgWidth = $(this).width();
$(this).css({ left: newLeft < 0 && (Math.abs(newLeft - parentWidth) < imgWidth) ? newLeft : left, top: newTop < 0 && (Math.abs(newTop - parentHeight) < imgHeight) ? newTop : top }).data({ startX: e.clientX, startY: e.clientY, }); } }) })