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 ответа:
Редактировать:
$(document).ready(function(){ $("#targetItems").height($("#sourceItems").height()); $("#sourceItems").height($("#sourceItems").height()); });
Старый Ответ:
Используйте вспомогательную функцию, которая гарантирует, что перетаскиваемые элементы имеют правильную ширину и высоту.
Что-то вроде этого: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