javascript - jQuery UI 可排序占位符出现在不正确的位置，但仅在第一次悬停时出现

Question

当我将元素从一个 sortable 拖动到另一个连接的 sortable 时，我遇到了一个关于 jQuery UI 的 sortable 占位符初始定位的错误。

这是一张显示占位符出现在其应有位置上方一个索引位置的图片。请注意，RHS 列表中的 Item3 位于占位符下方，但当占位符出现时，我的指针完全位于 Item3 下方:

一旦 helper 被拖动多一点，位置就会自行修复，但会导致一些难看的闪烁。请注意，如果我将我的助手拖出 RHS 列表，然后将其拖回 RHS 列表——不会发生闪烁。它仅在第一次进入时出现。

Here's a working example of the issue

这是链接中引用的代码:

//  HTML:
<div class='sortable-list'>
    <div class='sortable-list-item'>Item1</div>
    <div class='sortable-list-item'>Item2</div>
    <div class='sortable-list-item'>Item3</div>
</div>
<div class='sortable-list'>
    <div class='sortable-list-item'>Item1</div>
    <div class='sortable-list-item'>Item2</div>
    <div class='sortable-list-item'>Item3</div>
</div>

// CSS:
.sortable-list {
    border: solid 1px black;
    height: 250px;
    margin-left: 5px;
    overflow-y: auto;
    overflow-x: hidden;
    display: inline-block;
}

.sortable-list-item {
    border: solid 1px red;
    height: 50px;
    width: 100px;
}

.sortable-placeholder {
    background-color: #ebebeb;
}

//  JS:
var sortlists = $('.sortable-list').sortable({
  tolerance: 'pointer',
  connectWith: '.sortable-list',
  placeholder: 'sortable-placeholder sortable-list-item'
});

正在寻找确认这是 jQuery UI 的错误或对我的 CSS 的更正，但我没有看到。

更新 1:

这是我在 Chrome 33 beta 上重现该问题的截屏视频:http://screencast.com/t/cAV6xYXWUO

Answer 1

我可以在我的 chrome (32.0.1700.76) 中重现这个问题

纠正它的一种方法是在列表的末尾添加一个空的 div。该错误仍会发生，但用户根本看不到它:

<div class='sortable-list'>
    <div class='sortable-list-item'>Item1</div>
    <div class='sortable-list-item'>Item2</div>
    <div class='sortable-list-item'>Item3</div>
    <div></div>
</div>
<div class='sortable-list'>
    <div class='sortable-list-item'>Item1</div>
    <div class='sortable-list-item'>Item2</div>
    <div class='sortable-list-item'>Item3</div>
    <div></div>
</div>