Question

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

我将this JSFiddle放在我的演示应用页面中，经过一些试验和错误后发现，CSS样式中的某些内容会导致拖动始终取消。

测试代码非常简单：

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

尝试并拖动一个项目，它将始终弹回，就像被取消一样。触发停止事件，但更新不会触发，因为它永远不会完成拖动。

删除CSS的最后一部分将允许它工作，但删除其他部分也会导致它失败，因此它可能是多种样式导致效果

.details {
    float: left;
}

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

Answer 1

Js Fiddle

问题是由于.display左侧的浮动没有清除，因此您可以使用display:flex或display:inline-block来获取

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

但如果你使用jquery ui

中的默认样式会更好

Answer 2

如果.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/

为什么这个CSS样式会阻止jQuery UI从触发更新事件中排序？

2 个答案: