1

这个问题比描述的更容易看到。见这里：jsFiddle

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

在显示的三个场景中，它们都适用float:left于 LI 元素，但最后一个表现不佳；在最后一堆排序的项目中，单击第一个或第二个项目会将列表的其余部分“拖放”到它们所在的行下方（并单击该项目）。

当float:leftCSS 使用内联样式直接应用于 my <li>s 而不是通过 css 文件应用相同的更改时，就会展示该场景。这是一个 jQueryUI 错误吗？

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

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

/* 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!应用您的可排序元素的浮动。你能解释为什么内联样式不包含在占位符中吗？

4

1 回答 1

3

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

于 2013-07-12T16:54:45.033 回答