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

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

Answer 2

编辑：

$(document).ready(function(){
    $("#targetItems").height($("#sourceItems").height());
    $("#sourceItems").height($("#sourceItems").height());
});

http://jsfiddle.net/JEY4U/1/

旧答案：

使用“帮助”功能，确保拖动的元素具有适当的宽度和高度。
像这样的：

helper: function(event, ui) {
    $(ui).width($(ui).width());
    $(ui).height($(ui).height());
    ui.children().each(function() {
        $(this).width($(this).width());
    });
    return ui;
}

你可以这样使用它：

$(SOME_OBJECT).sortable({
    connectWith: ...,
    placeholder: ...,
    ......
    helper: function....
});

当然，你可以编写任何你喜欢的服装辅助函数。