4

我正在尝试使用 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/

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

欢迎任何帮助:)

4

2 回答 2

2

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

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

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

于 2013-06-04T16:58:22.200 回答
0

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

一种解决方法是

  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() );
});

  3. 最后，您可能需要修复每个容器的 line-height 以避免内联图像或较大文本改变行高的情况（在这个 jsfiddle 示例中不是问题，但对于可能遇到该问题的任何其他人来说都提及它）。

于 2014-09-12T15:28:57.040 回答