javascript - jQuery 可排序边距问题

Question

我有两个可排序的列表，我可以将第一个列表中的项目添加到第二个列表中。默认行为会从源列表中删除元素，但这不是我想要的（我希望将其复制到目标列表中），因此我进行了一些调整以在源列表中克隆移动的元素之前将其删除。

它有效，但我对克隆元素的边距有奇怪的问题。你自己看：

这是之前的：

一些拖动后，出现边距不一致：

我在这里有一个问题的 jsfiddle：http: //jsfiddle.net/JNbsX/

我已经在 Chrome 和 Firefox 上对其进行了测试，这两种浏览器都存在问题。任何帮助表示赞赏。谢谢！

Answer 1

不完全确定为什么会发生这种情况，但是display: list-item;尽管display: inline-block;您的 css.

设置ul > li为li似乎可以解决问题：http: //jsfiddle.net/RichardTowers/rZuRt/

Answer 2

您仍然可以使用display: inline-block，但您需要在所有项目之前和之后添加空格。

$('ul#source').sortable({
    助手：'克隆'，
    连接：'ul#dest'，
    开始：函数（事件，用户界面）{
        $("ul#source > li").eq($(ui.item).index()).after(
            $(ui.item).clone().addClass('clone').show()
        );
        $('.sortable-placeholder').before(' ').after(' '); // 在此处添加空格
    },
    更改：函数（事件，用户界面）{
        $('.sortable-placeholder').before(' ').after(' '); // 在此处添加空格
        ui.item.before(' ').after(' '); // 在此处添加空格
    },
    删除：函数（事件，用户界面）{
        $("ul#source > li").removeClass('clone');
    },
    停止：函数（事件，用户界面）{
        $("ul#source > li.clone").remove();
    },
    占位符：'可排序占位符'，

});