jquery - 为什么这个 CSS 样式会阻止 jQuery UI sortable 触发更新事件？

Question

我最近更新了一个使用 jQuery UI sortable 的插件，它停止触发 update 事件。

我放在一起this JSFiddle从我的演示应用程序页面中，经过反复试验发现它是 CSS 样式中的某些东西，导致拖动总是取消。

测试代码很简单:

$('.sortable').sortable({
    stop: function () {
        console.log("stop");
    },
    update: function () {
        console.log("update");
    }
});

尝试拖动一个元素，它总是会像取消一样弹回。停止事件触发，但更新不会触发，因为它从未完成拖动。

去掉最后一部分css就可以了，但是去掉其他部分也会导致失效，所以可能是多种样式导致的效果

.details {
    float: left;
}

在 sortable 中导致这种奇怪行为的样式是什么？

Answer 1

如果 .name 和 .details 有 float:left

.name {
    float: left;
    color: blue;
}
.details {
    float: left;
}

.sortable li 的高度将为 0，并导致 https://github.com/jquery/jquery-ui/blob/master/ui/sortable.js 中的 _mouseDrag 函数出现一些错误。 ，你需要给li一个高度

.sortable li {
    clear: both;
    height:20px;    //height of .name and .details
}    

http://jsfiddle.net/haoh4L6d/8/

或者像这样的一些非 float 内容

<li data-id="7"> 
    <div class="name">Test name 7</div>
    <div class="details">Details for item 7 (Display order: 1)</div>
    &nbsp;
</li>    

http://jsfiddle.net/haoh4L6d/6/