如何加入CSS transformY和jQuery UI可排序

Question

我有一个必须具有有限高度的任务盒。为什么？因为我有一个通过CSS transformY向下滚动任务的按钮，它让我看到之前隐藏的更多任务。在我的小提琴中，我创造了两个例子。首先是点击＆＃34;滚动按钮＆＃34;第二个是在3个磁带之后（所以我们可以看到另外3个磁带）。

然后我把那些盒子分类了。问题是＆＃34;滚动＆＃34;拖拽的元素正在跳起来。

请自行尝试，在第一个框和第二个框中拖放任务：

＆＃13;

＆＃13;

$(".barbox").sortable();

$("#scrolled").children(".bar").css("transform", "translateY(-153px)");

＆＃13;

.barbox{
  height: 307px;
  overflow: hidden;
}

h1{
  margin-top: 30px;
}

.bar{
  display: flex;
  align-items: center;
  height: 50px;
  width: 300px;
  background-color: yellow;
  border-top: 1px solid red;
  overflow: hidden;
  vertical-align:bottom;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<h1>Example 1:</h1>
<div class="barbox">
  <div class="bar"><div class="task">Task 1.</div></div>
  <div class="bar"><div class="task">Task 2.</div></div>
  <div class="bar"><div class="task">Task 3.</div></div>
  <div class="bar"><div class="task">Task 4.</div></div>	
  <div class="bar"><div class="task">Task 5.</div></div>
  <div class="bar"><div class="task">Task 6.</div></div>
  <div class="bar"><div class="task">Task 7.</div></div>	
  <div class="bar"><div class="task">Task 8.</div></div>
  <div class="bar"><div class="task">Task 9.</div></div>
</div>
<h1>Example 2:</h1>
<div class="barbox" id="scrolled">
  <div class="bar"><div class="task">Task 1.</div></div>
  <div class="bar"><div class="task">Task 2.</div></div>
  <div class="bar"><div class="task">Task 3.</div></div>
  <div class="bar"><div class="task">Task 4.</div></div>	
  <div class="bar"><div class="task">Task 5.</div></div>
  <div class="bar"><div class="task">Task 6.</div></div>
  <div class="bar"><div class="task">Task 7.</div></div>	
  <div class="bar"><div class="task">Task 8.</div></div>
  <div class="bar"><div class="task">Task 9.</div></div>
</div>

＆＃13;

＆＃13;

＆＃13;

如何提出这个？如何加入transformY和jQuery UI可排序？