jquery-ui-sortable - jQuery UI Sortable，如何固定列表高度？

Question

我正在使用 jQuery UI“可排序”插件来选择和排序项目。

我将插件设置为有两个列表，一个用于“可用”项目，第二个用于“选定”项目。

插件按预期工作，我可以将项目从一个列表移动到另一个列表。

但是，当我从列表中删除一项时，列表的高度会降低。有什么办法可以解决吗？

实际上，我想将两个列表的外边框设置为左侧项目的初始高度(开始时，所有项目都在第一个列表中)

这张图片描述了我想做什么 :

红线是我想要的。我希望两个列表的大小都是固定的。

这是我的代码(实际上是从 asp.net 网页生成的):

<script type="text/javascript">
    $(function () {
        $("#sourceItems").sortable({
            connectWith: "#targetItems",
            update: function (event, ui) {
                $("#selectedUserIDs").val(
                    $("#targetItems").sortable('toArray')
                    );
            },
            placeholder: "ui-state-highlight"
        });
        $("#targetItems").sortable({
            connectWith: "#sourceItems",
            placeholder: "ui-state-highlight"
        });

        $("#sourceItems, #targetItems").disableSelection();
    });
</script>
<style type="text/css">
#sourceItems, #targetItems { list-style-type: none; margin: 0; padding: 0; margin-right: 10px; background: #eee; padding: 5px; width: 230px; border:solid 1px black; }
#sourceItems li, #targetItems li { margin: 5px; padding: 5px; width: 200px; height: 12px; }
</style>
<div style="float: left; display: inline-block; width:fill-available">
    <p>Available :</p>
    <ul id="sourceItems" class="droptrue">
        <li class="ui-state-default" id='i1'>item1</li>        
        <li class="ui-state-default" id='i32'>item2</li>        
        <li class="ui-state-default" id='i47'>item3</li>        
        <li class="ui-state-default" id='i46'>item4</li>
    </ul>
</div>

<div style="float: left; display: inline-block;">
    <p>Selected :</p>
    <ul id="targetItems" class="droptrue">
    </ul>
</div>
<div style="display: none">
    <input name="selectedUserIDs" type="text" id="selectedUserIDs" />
</div>

隐藏的输入字段是我用于存储所选项目的容器(与表单一起发布)。

我试过将 .height($("#sourceItems).outerHeight()); 添加到两个列表，但这不起作用。

Answer 1

我来这里是为了寻找针对同一问题的类似但更通用的解决方案。这里的解决方案对我没有帮助，但我自己想出了办法，并认为分享它可能会有所帮助。

我不想固定两个可排序列表，我只是想让它们保持相同的高度。当您处理大量项目时，列表周围有两个动态调整大小的方框会使工作变得困难，因为一个方框比另一个小得多。将两个框都设置为固定高度也不是最佳选择，因为一旦一个列表中的项目数量超过该高度，您就会得到滚动条。我希望两个框都使用 JQuery 可排序的内置功能动态扩展，connectWith 代码，但我也希望它们都设置为两者中较大的一个。为此，我发现您可以修改列表上的填充，并且该区域仍将是用于拖放目的的可交互区域。

因此，要使两个 connectWith、可排序列表保持相同的高度，您可以为 over 事件添加以下处理程序:

        over: function(event, ui) {
           var heightDiff = $("#sourceItems").height() - $("#targetItems").height();
           $("#sourceItems").css('padding-bottom', (Math.abs(heightDiff) - heightDiff) / 2 + 'px');
           $("#targetItems").css('padding-bottom', (Math.abs(heightDiff) + heightDiff) / 2 + 'px');
        }

这是一个使用此事件处理程序扩展另一个示例的 fiddler 示例:http://jsfiddle.net/TLrn7/