Question

这个问题比描述的更容易看到。请参见此处： jsFiddle

为了更清楚地了解正在发生的事情，我更新了小提琴以包含一个可见和红色的.ui-sortable-placeholder类。这是与sortable相关的jQueryUI（通常）不可见元素的类。如下所示：http://jsfiddle.net/rLW9m/9/。感谢George在他的回答中指出了这一点。有了这个答案，我们可以认为这解决了“什么”，但也许“为什么”仍然是TBD。

在显示的三个场景中，它们都将float:left应用于LI元素，但最后一个表现不佳;在最后一批已排序的项目中，点击第一个或第二个项目“删除”列表的其余部分它们所在的行（并点击该项目）。

使用内联样式将float:left CSS直接应用于<li>与通过css文件应用相同更改时，会显示该方案。这是一个jQueryUI错误吗？

当我以与jQueryUI's documentation显示的方式相同的方式将CSS应用于我的元素时（jsFiddle中的第一个例子），那么排序就好了。但是，一旦相同的CSS（据我所知）将直接应用于我的列表项，那么排序行为就会变得不稳定，如上所述。

让jQueryUI在网格中很好地排序的方法是使用类或其他机制在CSS文件中应用float ：

/* Starting from UL descriptor with LI descendants */
.ulClass li {
    float:left;
}
/* or directly to LI element but still via CSS file */
.makeTheseLIsSortable {
    float:left;
}
/* DOES NOT WORK properly to directly apply CSS 
   (items to the right are shifted below when items on left selected) */
<ul id='makeSortable'>
    <li style='float:left'>test</li>
    <li style='float:left'>three</li>
</ul>

为什么jQueryUI对这两个CSS应用程序的处理方式如此不同？渲染时，无论哪种方式，列表元素本身都是float:left。你有什么看法？为什么我不能直接将CSS应用于列表元素并获得相同的预期行为？

编辑：感谢乔治，我现在对正在发生的事情有了更好的了解。 jQueryUI 没有将元素内联样式复制到它们的“占位符元素”可能有一些非常好的理由，但它们确实传递了类详细信息。如果jQueryUI专业版稍后出现并认为这是一个错误，那么我很高兴报告它。在此之前，请务必通过class应用您的可排序元素的浮点数！你能解释为什么内联样式没有包含在占位符中吗？

Answer 1

问题是jqueryUI插入的占位符没有浮动左侧样式。 jQueryUI复制元素类型和要为占位符排序的项目上的类，但它似乎不会复制内联样式。

当float直接应用于元素时，jQueryUI sortable（作为网格）将行移到自身下方

1 个答案: