当容器溢出div

Question

以下是我的问题（JSFiddle）

的代码片段

$("#container").droppable({
  accept: '.draggable',
  tolerance: 'pointer',
  drop: function(event, ui) {

    var clone = $(ui.helper).clone();
    var parent = $('#container');

    $(this).append(clone);
    var leftAdjust = clone.position().left - parent.position().left;
    var topAdjust = clone.position().top - parent.position().top;
    clone.css({
      left: leftAdjust,
      top: topAdjust
    });
    clone.css('z-index', 1000);
    $(".draggable").draggable();
  }
});

$(".draggable").draggable({
  helper: 'clone',
  cursor: 'hand',
  zindex: 1000
});

#container{
  position: relative;
}
.draggable{
  height: 40px;
  width: 80px;
  background-color: maroon;
  color: yellow;
  position: absolute;
  border: 1px solid black;
}

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<div class="draggable">some text</div>
<div id="outer" style="padding: 50px;">
  <br/>
  <br/>
  <br/>
  <div id="container" style="height: 400px; overflow: auto !important;">
    <div class="img"><img src="https://pbs.twimg.com/profile_images/491337595905794049/lWKwJt8Z.jpeg" /></div>
    <br/>
    <div class="img"><img src="https://pbs.twimg.com/profile_images/491337595905794049/lWKwJt8Z.jpeg" /></div>
    <br/>
    <div class="img"><img src="https://pbs.twimg.com/profile_images/491337595905794049/lWKwJt8Z.jpeg" /></div>
    <br/>
  </div>
</div>

我的主要问题是，当您将左上角的框拖到容器中时，它可以正常工作，然后向下滚动容器，然后它会全部掉线并且不会掉落到您实际掉落的位置等。

我遇到的另一个问题是，一旦拖放到容器上，当您拖放新项目时，它会自行复制。

编辑澄清

当您将DIV移动到容器中时，它需要保持在滚动时将其移动到容器内的位置。