Question

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

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

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

但是，当我从列表中删除一个项目时，列表的高度会降低。有没有办法解决它？

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

这张图片描述了我想要做的事情 enter image description here ：

红线是我想要的。我希望两个列表都具有此大小，已修复。

这是我的代码（实际上是从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 sortable，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....
});

当然，你可以写任何你喜欢的服装助手功能。

Answer 3

使用CSS将jQuery UI列表高度设置为特定高度。 300px高度的示例。

.ui-autocomplete {
  max-height: 300px;
  overflow-y: auto;
  /* prevent horizontal scrollbar */
  overflow-x: hidden;
}
/* IE 6 doesn't support max-height
 * we use height instead, but this forces the menu to always be this tall
 */
* html .ui-autocomplete {
  height: 300px;
}

请阅读此处的文档：https://jqueryui.com/autocomplete/#maxheight

jQuery UI Sortable，如何修复列表高度？

3 个答案: