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

Question

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

Answer 1

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

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

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

Answer 2

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

Answer 3

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

Answer 4

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

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

Answer 5

В моем случае я нашел решение, похожее на 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

Answer 6

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

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

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