jquery 可排序的内联块显示显示划痕

Question

我正在尝试使用 JQuery 使用已连接的可排序列表，但是，如果我在我的 li CSS 中使用 display:inline-block，则占位符和位置不正确。它通常更高，并且项目的大小也会调整，从而导致自动换行。

如果我将 display:inline-block 更改为 float:left here

ul.fieldlist li
{
        display:inline-block;
        list-style-type: none;
}

然后拖放工作正常，但由于某些原因我无法拖回原始可排序。

我做了一个jsfiddle来显示问题：

http://jsfiddle.net/uArNx/5/

这可能是我的填充/边距有问题，但我无法弄清楚。

欢迎任何帮助:)

Answer 1

修复是vertical-align: top。据我所知，JqueryUI Sortables 不能很好地处理vertical-align: middle。

尝试将 vertical-align: top 添加到您的 jsfiddle 中——它可以解决对齐问题。

这里有一些注释，以及对内联块的初始修复，但我认为 valign 中间情况被遗漏了。 http://bugs.jqueryui.com/ticket/6942

Answer 2

这里的问题是由于试图对每个大小由可变文本内容决定的内联块进行排序而引起的。

一个解决办法是

1. 按照其他用户的建议设置vertical-align: top

2. 要么a) 固定每个inline-block 容器的大小，要么b) 在每个容器上设置white-space: nowrap 以防止拖动时行高加倍包含多个单词的容器。

   由于您的容器是根据其中的文本调整大小的，因此执行选项 a) 必须在 javascript 中，理想情况下是在拖动开始时（尽管如果列表不会改变，您可以在页面加载时执行一次）。类似于以下内容（您必须提供正确的 li 选择器和拖动事件名称...）：

   $('.li').on('dragStart', function (e) {
     var $this = $(this);
     $this.width( $this.width() );
     $this.height( $this.height() );
   });
   

1234563有这个问题）。