javascript - 在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'
  });
});