追加可拖动到容器jquery

时间:2017-02-19 21:37:03

标签: javascript jquery css jquery-ui

每次从我的图库中选择一个图像时,我遇到了一个小问题,图像显示在一个容器中我可以调整大小并在容器内拖动图像我的问题是当我将图像拖到容器之外时图像会隐藏我想要的是图像停在容器上我不希望它隐藏。怎么能让这成为可能呢?这是我所拥有的我没有一个工作可拖动因为需要很多编码即将发布脚本和一些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>

1 个答案:

答案 0 :(得分:0)

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

例如

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