Содержит изображение внутри div jquery

Question

У меня есть небольшая проблема с содержанием изображения в контейнере. Когда изображение перетаскивается за пределы контейнера, изображение скрывает то, что я хочу, чтобы изображение не скрывалось за контейнером. Я хочу, чтобы изображение останавливалось в контейнере, как я могу сделать это возможным здесь, является скриптом.

$('img').on('click', function() { 
 
    $('#fotos').append('<div class="imgdrag"><img class="modal-content" src="' + $(this).attr('src') + '"/></div>'); 
 
    $('.imgdrag').draggable(); 
 
    $('#fotos').droppable(); 
 
    $('.modal-content').resizable(); 
 

 

 
    $(".download").attr("href", $(this).attr('src')); 
 
    $(".download").show(); 
 
    }); 
 

 

 

 
});

.container5 { 
 
    background-color: transparent; 
 
    width: 220px; 
 
    height: 320px; 
 
    margin: auto; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    border: 1px solid red; 
 
    position: absolute; 
 
    overflow: hidden; 
 
}

<div id="fotos" class="bananas"><img class="modal-content" id="imgdisplay" /></div>

$(".bananas").appendTo($(".container5"));

Answer 1

Отъезд containment option из перетаскиваемом виджета JQuery UI.

Здесь I baked a fiddle just for you.

JS

$(function(){ 
    $('img').draggable({ 
    containment: '.container' 
    }); 
});