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({ 
    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', 

});