排序时项目跳到最左边

Question

为什么title在上下拖动时跳到左侧，如何防止这种情况？

我尝试了this解决方案-不适用于我。

$(".act").sortable({
  containment: "parent",
  axis: "y",
  helper: "clone",
  tolerance: "pointer"
 });

.parent{
position:fixed;
left:5px;
top:9px;
width:50%;
display:grid;
grid-template-columns:1fr 1fr;
overflow:hidden;
grid-gap:5px;
}

.parent div{
background:gold;
}

.title{
cursor:cell;
position:relative;
}

<script  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class='parent'>
<div></div>
<div class='act'>
<div class='title'>lorem</div>
<div class='title'>ipsum</div>
<div class='title'>dolor</div>
<div class='title'>sit</div>
</div>
</div>