jQuery UI 可排序占位符在第一次悬停时出现在错误位置，但之后正常。

Question

jQuery UI 可排序占位符在第一次悬停时出现在错误位置，但之后正常。

javascriptjqueryhtmlcssjquery-ui

3

我在使用jQuery UI的sortable插件时遇到了一个bug，即当我从一个已连接的sortable列表中拖动一个项目到另一个列表时，占位符的初始位置出现问题。

下面是一张图片，显示了占位符出现在本应该在下一索引位置的情况。请注意，RHS列表上的Item3在占位符下方，但是当占位符出现时，我的指针完全在Item3下方：

enter image description here

一旦助手被拖动更多，位置就会自行修正，但会引发一些难看的闪烁。请注意，如果我将助手从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

- Sean Anderson

1

当我在你的示例中尝试它时，似乎可以工作。我在Chrome中进行了测试... - Ruben Verschueren

Chrome的哪个版本？我用的是33.0.1750.29 beta-m，但我已经看到这个问题有一段时间了。如果需要，我可以录制一个小的屏幕截图来帮助解决问题。让我看看它是否也会在FF中出现。 - Sean Anderson

对我来说似乎可以工作，Chrome 版本 32.0.1700.76 m。 - Trevor

版本：版本32.0.1700.76 m - Ruben Verschueren

嗯，我刚刚安装了非测试版，但我仍然得到v33。你们是最新的吗？我使用的是Windows 7，但Omaha显示当前版本为v32，所以可能我错了：http://omahaproxy.appspot.com/ - Sean Anderson

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joel · Accepted Answer

我能在我的Chrome浏览器（32.0.1700.76）上重现这个问题。

纠正这个问题的一种方法是只需在列表末尾添加一个空的div。该bug仍将发生，但用户将完全看不到它：

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