По какой-то причине заполнитель для моих сортируемых элементов составляет около 10 пикселей. Все мои сортируемые предметы имеют разную высоту. Как я могу изменить высоту каждого заполнителя в соответствии с перемещаемым элементом?
По какой-то причине заполнитель для моих сортируемых элементов составляет около 10 пикселей. Все мои сортируемые предметы имеют разную высоту. Как я могу изменить высоту каждого заполнителя в соответствии с перемещаемым элементом?
Ответы:
Я обычно решаю эту проблему, привязывая обратный вызов, который устанавливает высоту заполнителя на высоту элемента, сортируемого для start
события. Это простое решение, которое дает вам детальный контроль над тем, как вы хотите, чтобы ваш заполнитель отображался.
$( ".column" ).sortable({
connectWith: ".column",
start: function(e, ui){
ui.placeholder.height(ui.item.height());
}
});
Вы пробовали установить forcePlaceholderSize:true
свойство? Прочтите на странице документации jQuery UI Sortable .
.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
на .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; }
(удалите высоту). Итак, @DarthJDG, вы правы!
Ваши элементы display: block
? Встроенные элементы могут привести к неправильному сохранению высоты в заполнителе. Например. этот jsFiddle, похоже, имеет проблему, аналогичную описанной вами. Добавление display: block
в .portlet
класс исправляет это.
Вместо использования «ui.item.height ()» вы можете использовать «ui.helper [0] .scrollHeight» для получения стабильного результата при перетаскивании элемента из внешнего контейнера.
$( ".column" ).sortable({
connectWith: ".column",
start: function(e, ui){
ui.placeholder.height(ui.helper[0].scrollHeight);
}
});
Вы можете установить стиль для своего заполнителя в качестве опции для сортировки.
$( "#sortable" ).sortable({
placeholder: "ui-state-highlight"
});
И просто придайте этому стилю высоту. Надеюсь, что это сработает.
В моем случае я нашел решение, подобное JP Hellemons , в котором я устанавливаю высоту заполнителя (с ! Important ) на заказ, а также устанавливаю видимость с фоном, чтобы увидеть изменения для себя (также вы можете стилизовать свой заполнитель таким образом, как хотите ).
Это также работает с display: inline-block;
.ui-sortable-placeholder {
background:red !important;
height: 2px !important; // this is the key, set your own height, start with small
visibility: visible !important;
margin: 0 0 -10px 0; // additionaly, you can position your placeholder,
} // in my case it was bottom -10px