jQuery可排序保证金问题

Question

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

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

这是之前：

经过一些拖动后，会出现边距不一致的情况：

我在这里有一个问题：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({
    helper: 'clone',
    connectWith: 'ul#dest',
    start: function(event, ui) {
        $("ul#source > li").eq($(ui.item).index()).after(
            $(ui.item).clone().addClass('clone').show()
        );
        $('.sortable-placeholder').before(' ').after(' '); // add white space here
    },
    change: function(event, ui) {
        $('.sortable-placeholder').before(' ').after(' '); // add white space here
        ui.item.before(' ').after(' '); // add white space here
    },
    remove: function(event, ui) {
        $("ul#source > li").removeClass('clone');
    },
    stop: function(event, ui) {
        $("ul#source > li.clone").remove();
    },
    placeholder:'sortable-placeholder',

});