jQuery UI可排序占位符显示在错误的位置,但仅在第一个on-hover上

Question

我遇到一个关于jQuery UI的可排序占位符的初始定位的错误,当我将一个项目从一个可排序拖动到另一个可连接的可排序时.

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

一旦帮助器被拖得更多,该位置就会自行修复,但会导致一些丑陋的闪烁.请注意,如果我将助手拖出RHS列表,然后将其拖回RHS列表 - 则不会出现闪烁.它只是在它第一次进入时.

这是该问题的一个有效例子

这是链接中引用的代码:

//  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>