Question

我有一个页面，其中的片段如下：

这是一个可排序的列表。但是，当切换某些元素时，边距消失。尝试切换标有“Campbell”和“Painted Post”的元素。看看坎贝尔的新位置与标有“Cohecton”的元素之间的差距是如何消失的？

如何阻止这种情况发生？

Answer 1

这是由于span元素之间的换行符造成的。这相当于每个字符之间的单个空白字符。

拖动后，它会消除换行符，从而减少间距。

删除每个span元素之间的空格或切换到无序列表尽管如此，IE仍可能会在<li>标记之间出现换行问题。我不记得了。

Answer 2

我想提供一个我发现的替代解决方案。更改为列出项目无效。然而，simshaun对问题的识别是正确的。

我通过定义sortable元素的stop函数，并在项目之前和之后放置换行符来解决这个问题，如下所示：

    $('.sortable-collection').sortable({
        stop: function(event, ui) {
            ui.item.before("\n").after("\n");
        }
    });

这解决了问题，因此每个元素都排成一行并匹配。