jquery可以使用内联块显示划痕显示

Question

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

如果我更改display：inline-block by 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）修复每个内联块容器的大小，或者 b）在每个内容块上设置white-space: nowrap以防止加倍拖动包含多个单词的容器时的行高。

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

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

3. 最后，您可能需要修复每个容器的行高，以避免内嵌图像或较大文本改变行高（在此jsfiddle示例中不是问题，但为其他任何人提及它）有这个问题）。