Question

我有两个有序列表，用户可以在它们之间移动项目。我正在使用jQuery UI的Selectable。问题是，当我从列表中间移动项目时，它会留下一个空白空间。如何根据列表中实际有多少项目缩小列表？

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");
    });
});

Answer 1

好的，它现在似乎有用了。也许它是某种CSS或空间问题，但它突然有效！让我们忘记这个问题...

删除可选项后，使用jQuery删除空白区域

1 个答案: