Проблема высоты сортируемого заполнителя в jquery


93

По какой-то причине заполнитель для моих сортируемых элементов составляет около 10 пикселей. Все мои сортируемые предметы имеют разную высоту. Как я могу изменить высоту каждого заполнителя в соответствии с перемещаемым элементом?


Можете ли вы опубликовать его в jsFiddle?
Сатиш

Произошло ли это, когда вы просто перетаскиваете свой предмет в другое место? или элементы уже имеют эту высоту после загрузки страницы? в любом случае загляните сюда: bugs.jqueryui.com/ticket/4482 и попробуйте обходной путь, как уже упоминалось
Мохаммад

Ответы:


251

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

$( ".column" ).sortable({
    connectWith: ".column",
    start: function(e, ui){
        ui.placeholder.height(ui.item.height());
    }
});

См. Обновленный тестовый пример


21
Мне лично пришлось заменить ui.item.height () на ui.helper.outerHeight () из-за некоторых проблем с полями и отступами, искажающими фактическую высоту элемента
oshikryu

извините, но я не думаю, что это работает, в этой ссылке jsfiddle.net/t8gcZ/1 высота заполнителя такая же, как высота элемента (237 пикселей), но в начальный момент мы могли видеть, что нижний элемент перемещается вверх на помет
Makio

@Makio Это из-за нижней части. Добавление padding-bottom к заполнителю решает эту проблему. jsfiddle.net/t8gcZ/136
mekwall

15

Вы пробовали установить forcePlaceholderSize:trueсвойство? Прочтите на странице документации jQuery UI Sortable .


2
Я пробовал это, но добавление истины или ложи не имеет значения для моего исходного сайта, который сохраняет его на высоте 10 пикселей. в этом jsfiddle размер изменяется правильно, но для forceplaceholderize значение true или false не имеет значения. jsfiddle.net/t8gcZ
oshirowanen

@oshirowanen: В каком браузере вы его тестируете?
DarthJDG

@oshirowanen: Можете ли вы разместить ссылку на код, где он действительно не работает?
DarthJDG

2
Это работает для меня. Все, что мне нужно было сделать, это изменить CSS .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }на .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; }(удалите высоту). Итак, @DarthJDG, вы правы!
JP Hellemons

@JPHellemons, который работает, только если высота не является динамической
Эрдал Г.

2

Ваши элементы display: block? Встроенные элементы могут привести к неправильному сохранению высоты в заполнителе. Например. этот jsFiddle, похоже, имеет проблему, аналогичную описанной вами. Добавление display: blockв .portletкласс исправляет это.


То же самое и с плавающими элементами. Если элементы списка являются плавающими, заполнитель также должен плавать.
Адриан Мариника

2

Вместо использования «ui.item.height ()» вы можете использовать «ui.helper [0] .scrollHeight» для получения стабильного результата при перетаскивании элемента из внешнего контейнера.

$( ".column" ).sortable({
    connectWith: ".column",
    start: function(e, ui){
        ui.placeholder.height(ui.helper[0].scrollHeight);
    }
});

1

Вы можете установить стиль для своего заполнителя в качестве опции для сортировки.

$( "#sortable" ).sortable({
        placeholder: "ui-state-highlight"
});

И просто придайте этому стилю высоту. Надеюсь, что это сработает.


2
Но разве это не исправит высоту? Мне нужно, чтобы высота была такой же, как и содержание.
oshirowanen 05

1

В моем случае я нашел решение, подобное 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
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.