Полчаса писал вчера вам содержательный ответ, соорудил большой и красивый пример, а вдруг "вы не можете опубликовать ответ, так как вопрос был удален". Обидно, однако. Не делайте так больше.
Хорошо, что я писал ответ на jsfiddle в своем аккаунте:
https://jsfiddle.net/ipshenicyn/480gg35o/
Код рабочего примера с jsfiddle ниже (сниппеты здесь шалят второй день, поэтому пока plaintext).
По вопросу "нужна ли JQ UI": смотрите сами. Если вопрос только в простом перетаскивании этой картинки и вам подойдет мой код - нет нужды подключать жирную и медленную либу.
HTML
<div id="box" class="box">
<img id="src" src="http://www.newyorker.com/wp-content/uploads/2015/12/Veix-Goodbye-New-York-Color-1200.jpg"/>
</div>
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,
});
}
})
})