带内联块显示的jquery可排序表

我试图使用JQuery处理连接的可排序列表，但是，如果我在li CSS中使用display:inline块，占位符和位置不正确。它通常更高，而且项目的大小也会调整，从而导致wordwrap

如果我更改显示：按浮点值内联块：左

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

然后dragdrop工作正常，但由于某些原因，我无法将其拖回原始排序表

我制作了一个JSFIDLE来说明问题：

我的填充/边距可能有问题，但我不知道

---

欢迎提供任何帮助：）

修复程序为

垂直对齐：顶部

。据我所知，JqueryUI排序表不能很好地处理

垂直对齐：中间对齐

尝试将vertical align:top添加到您的JSFIDLE中——它会清除对齐问题

这里有一些注释，以及对内联块的初始修复，但我认为valign middle案例遗漏了。
这里的问题是由于尝试对内联块进行排序而导致的，每个内联块的大小由可变文本内容决定

解决办法之一是

根据其他用户的建议设置垂直对齐：顶部
a）固定每个内联块容器的大小，或者b）在每个容器上设置
空白：nowrap
，以防止在拖动包含多个单词的容器时行高加倍

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


最后，您可能需要固定每个容器的行高，以避免内联图像或较大文本改变行高的情况（在这个jsfiddle示例中不是问题，但请向可能有此问题的其他人提及）

我发现内联块也存在同样的问题。占位符的垂直错位与行高度成正比，因此这就是问题所在。我不知道是否有解决办法。
$('.li').on('dragStart', function (e) {
  var $this = $(this);
  $this.width( $this.width() );
  $this.height( $this.height() );
});