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

93

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

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

Ответы:

251

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

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

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

Mekwall
источник
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 .

DarthJDG
источник
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класс исправляет это.

Gijs
источник
То же самое и с плавающими элементами. Если элементы списка являются плавающими, заполнитель также должен плавать.
Адриан Мариника
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"
});

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

MANATTWeb
источник
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
user3780666
источник