从一个可排序到另一个不可工作的可排序排序项目

Question

我尝试将项目从一个Sortable列表移动到另一个列表，但项目不会移动父滚动的原因。 我的代码的片段示例。

$(".dragable .item").draggable({
                    revert: "invalid",
                    helper:'clone',
                    appendTo: '.main_container',
                    connectToSortable: '.contianer .sortable',
                    drag: function(event, ui) {
                        //cursor position adjustment
                        $(this).draggable('instance').offset.click = {
                            left: Math.floor(ui.helper.width() / 2),
                            top: Math.floor(ui.helper.height() / 2)
                        }
                    },
                })

                $('.contianer .sortable').sortable({
                      connectWith: ".sortable",
                      over: function(event, ui) {
                  },

                });

.sortable{
  background: gray;
  height: 750px;
  margin-bottom: 20px;

}
.dragable{
  float: left;
}
.main_container,body,html{
  overflow: hidden;
  height: 100%;
}
.main_container{
  position: absolute;
  width: 100%;
  
}
.contianer{
  overflow: auto;
  width: 300px;
  padding:0 5px;
     height: calc(100% - 57px);
    float: left;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div class="main_container">
  <p>Item move from List 1 to List 2 is not working. List two is downside scroll</p>
  <div class="contianer">
    <h3>Sortable List 1</h3>
    <div class="sortable1 sortable"></div>
     <h3>Sortable List 2</h3>
    <div class="sortable2 sortable"></div>
  </div>

  
  <div class="dragable">
      <li class="item">test1</li>
      <li class="item">test2</li>
      <li class="item">test3</li>
  </div>

 
</div>