jQuery UI Sortable, как исправить высоту списка?


Я использую 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()); в оба списка, но это не работает.

3 2

3 ответа:

Редактировать:

$(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....
});

Конечно, вы можете написать любую вспомогательную функцию костюма, которую захотите.

Я пришел сюда в поисках похожего, но более обобщенного решения той же проблемы. Решение здесь не помогло мне, но я понял его самостоятельно и подумал, что было бы полезно поделиться им.

Я не хотел, чтобы два сортируемых списка были исправлены, я просто хотел, чтобы они оставались одинаковой высоты. Когда вы имеете дело с большим количеством элементов, наличие двух динамических блоков вокруг списка может затруднить работу, так как один блок намного меньше другого. Установка фиксированной высоты обоих ящиков также не является оптимальной, так как в этом случае вы получите полосы прокрутки, как только количество элементов в одном списке превысит эту высоту. Я хотел, чтобы обе коробки динамически расширялись, используя встроенную функциональность jQuery sortable, connectWith code, но я также хотел, чтобы они оба были просто установлены на больший из двух. Для этого я обнаружил, что вы можете изменить заполнение в списках, и эта область по-прежнему будет интерактивной областью для целей перетащите-и-падение.

Итак, чтобы сделать два списка 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/

Высота списка пользовательского интерфейса jQuery устанавливается на определенную высоту с помощью CSS. Например 300 пикселей по высоте.

.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