2010-05-07 173 views
1

我有兩個有序列表,用戶可以在它們之間移動項目。我正在使用jQuery UI的可選擇他們兩個。問題是,當我從列表中間移動項目時,它留下了一個空白空間。我如何根據列表中實際有多少項目來縮減列表?在刪除後用jQuery刪除空白空間可選項目

HTML

<ol id="allUnits"> 
    <li class="ui-state-default">Item 1</li> 
    <li class="ui-state-default">Item 2</li> 
    <li class="ui-state-default">Item 3</li> 
    <li class="ui-state-default">Item 4</li> 
    <li class="ui-state-default">Item 5</li> 
</ol> 

<input id="arrowRight" type="image" alt="Move item to right" src="<%= Url.Content("~/Content/Images/arrowRight.png")%>" /> 
<input id="arrowLeft" type="image" alt="Move item to left" src="<%= Url.Content("~/Content/Images/arrowLeft.png")%>" /> 

<ol id="productUnits"> 
    <li class="ui-state-default">Item 1</li> 
    <li class="ui-state-default">Item 2</li> 
    <li class="ui-state-default">Item 3</li> 
    <li class="ui-state-default">Item 4</li> 
    <li class="ui-state-default">Item 5</li> 
</ol> 

jQuery的

$().ready(function() { 
    $("#allUnits").selectable(); 
    $("#productUnits").selectable(); 

    $('#arrowRight').click(function() { 
     return !$('#allUnits .ui-selected').remove().appendTo('#productUnits').removeClass(".ui-selected"); 
    }); 
    $('#arrowLeft').click(function() { 
     return !$('#productUnits .ui-selected').remove().appendTo('#allUnits').removeClass(".ui-selected"); 
    }); 
}); 

回答

0

好了,似乎現在的工作。也許這是某種CSS或空間問題,但突然它有效!讓我們忘記這個問題...