Проблема висоти заповнювача заповнювача jquery

93

З якоїсь причини заповнювач для моїх предметів, що сортуються, становить близько 10 пікселів. Усі мої сортовані вироби мають різну висоту. Як я можу змінити висоту кожного заповнювача відповідно до переміщуваного елемента?

jquery jquery-ui jquery-ui-sortable

— oshirowanen
джерело

Чи можете ви опублікувати його на jsFiddle?

— Сатіш

Це трапляється, коли ви просто перетягуєте предмет в інше місце? або елементи вже мають таку висоту після завантаження сторінки? у будь-якому випадку подивіться тут: bugs.jqueryui.com/ticket/4482 і спробуйте обійти, як згадувалося

— Мохаммад,

250

Зазвичай я вирішую це шляхом прив'язки зворотного виклику, який встановлює висоту заповнювача до висоти елемента, що сортується до startподії. Це просте рішення, яке дає вам чіткий контроль над тим, як ви хочете, щоб відображався ваш заповнювач.

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

Дивіться оновлений тестовий випадок

— Мекволл
джерело

21

Мені особисто довелося замінити ui.item.height () на ui.helper.outerHeight () через деякі проблеми з полями та

— відступами, перекошуючи

вибачте, але я не думаю, що це працює добре, у цьому посиланні jsfiddle.net/t8gcZ/1 висота заповнювача однакова з висотою елемента (237 пікселів), але на момент запуску ми могли бачити, як

— нижченаведений

@Makio Це через заповнення дна. Додавання нижньої обшивки до заповнювача вирішує це. jsfiddle.net/t8gcZ/136

— mekwall

15

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

— DarthJDG
джерело

2

Я спробував це, але додавання true або false не має значення для мого оригінального сайту, який підтримує його висоту 10 пікселів. у цьому jsfiddle він змінює розмір правильно, але forceplaceholdize, встановлений у 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, який працює, лише якщо висота не динамічна

— Erdal G.

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);
    }
});

— Elanchezhian Narayanasamy
джерело

1

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

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

І просто надайте цьому стилю висоту. Сподіваюся, це працює.

— MANATTWeb
джерело

2

Але чи не це виправить висоту? Мені потрібна висота, така ж, як і вміст.

— oshirowanen

1

У моєму випадку я знайшов рішення, подібне до JP Hellemons , в якому я примушую висоту заповнювача (з ! Важливим ) до власного, а також встановлюю видимість із фоном, щоб бачити зміни для себе (також ви можете стилізувати свій заповнювач як завгодно, як вам заманеться) ).

Це також працює з 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

— користувач3780666
джерело