将可拖动附加到容器 jquery

Question

每次从我的图库中选择图像时都会遇到一个小问题图像显示到容器中我可以调整大小并将图像拖动到容器中我的问题是当我将图像拖动到容器之外时图像隐藏了什么我想要的是图像停在我不希望它隐藏的容器上。怎么可能呢？这就是我所拥有的，我没有可拖动的工作，因为这将需要大量编码，我只是要发布脚本和一些 CSS 和 HTML

  $('img').on('click', function() {
    $('#fotos').append('<div class="imgdrag"><img class="modal-content" src="' + $(this).attr('src') + '"/></div>');
    $('.imgdrag').draggable({appendTo: $(".container5")});
    $('#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="boxes" class="container5" style="float:center;">
<div id="fotos" class="bananas"><img class="modal-content" id="imgdisplay" /></div></div>

Answer 1

查看可调整大小的包含选项，您可以输入可调整大小的选择器将保留在其中的选择器。 您甚至可以使用父字符串，使其保留在父元素中

例如

 $('.modal-content').resizable({
       containment: "parent"
 });