У меня есть два упорядоченных списка, и пользователь может перемещать элементы между ними. Я использую Выбираемый пользовательский интерфейс 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");
});
});