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

85

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

  • 0
    Вы можете опубликовать это в jsFiddle?
  • 0
    Это происходит, когда вы просто перетаскиваете свой предмет в другое место? или элементы уже имеют эту высоту после загрузки страницы? в любом случае, посмотрите здесь: bugs.jqueryui.com/ticket/4482 и попробуйте обойти, как уже упоминалось
Теги:
jquery-ui-sortable

6 ответов

201
Лучший ответ

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

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

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

Поделиться
  • 19
    Мне лично пришлось заменить ui.item.height () на ui.helper.outerHeight () из-за некоторых проблем с полями и отступами, искажающими фактическую высоту элемента
  • 0
    извините, но я не думаю, что это работает хорошо, в этой ссылке jsfiddle.net/t8gcZ/1 высота заполнителя такая же, как и высота элемента (237px), но в начальный момент мы могли видеть, что нижний элемент перемещался вверх по мусору
Показать ещё 1 комментарий
14

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

Поделиться
  • 2
    я пробовал это, но добавление true или false не имеет значения для моего исходного сайта, который поддерживает его на уровне 10px. в этом jsfiddle он корректно изменяет размер, но forceplaceholderize, установленный в true или false, не имеет значения. jsfiddle.net/t8gcZ
  • 0
    @oshirowanen: В каком браузере вы его тестируете?
Показать ещё 4 комментария
2

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

$( ".column" ).sortable({
    connectWith: ".column",
    start: function(e, ui){
        ui.placeholder.height(ui.helper[0].scrollHeight);
    }
});
Поделиться
2

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

Поделиться
  • 0
    То же самое касается плавающих элементов. Если элементы списка плавающие, заполнитель тоже должен быть плавающим.
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
Поделиться
1

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

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

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню