为什么这种 CSS 样式会阻止可排序的 jQuery UI 触发更新事件？答案

【问题标题】：Why does this CSS styling stop jQuery UI sortable from firing the update event?为什么这种 CSS 样式会阻止可排序的 jQuery UI 触发更新事件？
【发布时间】：2014-10-01 16:57:54
【问题描述】：

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

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

测试代码很简单：

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

尝试拖动一个项目，它总是会像被取消一样弹回。 stop 事件触发，但 update 不会触发，因为它永远不会完成拖动。

去掉CSS的最后一部分会让它起作用，但是去掉其他部分也会导致它失败，所以可能是多个样式导致的效果

.details {
    float: left;
}

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

【问题讨论】：

如果 .name 和 .details 有 float:left .sortable li 的高度将为 0，你需要给 li 一个高度或一些非浮动内容http://jsfiddle.net/haoh4L6d/6/
@Abraham Uribe：请作为答案发布，我会接受。确实是计算的 LI 高度为 0 导致它。谢谢。

标签： jquery css jquery-ui jquery-ui-sortable

【解决方案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/

或者像这样的一些非浮动内容

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

【讨论】：

【解决方案2】：

Js Fiddle

问题是因为 .display 的浮动未清除，因此您可以使用 display:flex 或 display:inline-block 作为 li

ul.sortable li {
    list-style-type: none;
    display:flex;
}

但是如果你使用 jquery ui 的默认样式会更好

【讨论】：

flex 不是一个好的选择，因为浏览器支持不佳，inline-block 会导致列问题，但建议 +1。真正的问题是 LI 的 0 高度（这是浮动子 div 的副作用）。已要求@Abraham Uribe 发表他的评论作为答案。