当使用jQuery UI可排序时，页边距消失

Margins disappear when using jQuery UI sortable

本文关键字：页边距 消失 排序 jQuery UI      更新时间：2023-09-26

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

http://jsfiddle.net/McZM8/2/embedded/result/

这是一个可排序的列表。然而，当切换某些元素时，边距就消失了。试着切换标签为"Campbell"answers"Painted Post"的元素。看到Campbell的新位置和标记为"coheton"的元素之间的空白是如何消失的了吗?

我怎样才能阻止这种情况的发生?

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

当你拖拽某个东西后，它会取消换行符，从而减少间距。

自己看:http://jsfiddle.net/McZM8/3/

要么删除每个span元素之间的空格，要么切换到无序列表。
IE可能仍然会给你<li>标签之间的换行问题;我不太记得了

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

我通过定义可排序元素的停止函数来解决这个问题，并在项目的前后放置一个换行符，如下所示:

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

这解决了这个问题，使得每个元素都对齐并匹配。

相关文章：