Сравнение сортировки перетаскиванием пользовательского интерфейса jQuery с использованием float: left и display: inline-block - PullRequest
Новая
       6

Сравнение сортировки перетаскиванием пользовательского интерфейса jQuery с использованием float: left и display: inline-block

3 голосов
/ 07 октября 2010

У меня есть два примера здесь, Единственная разница между этими двумя примерами один использует display: inline-block, а другой использует float: left,

li.doc_item {дисплей: встроенный блок;} против li.doc_item {поплавок: левый;}

Моя проблема заключается в отображении: сортировка встроенных блоков не так быстра и не адаптивна, как float: left. Я хочу использовать display: inline-block, потому что эскизы, которые я переупорядочиваю иногда могут различаться по размеру и с плавающей точкой: левый не работает, когда миниатюры имеют разную высоту и ширину.

Любой вопрос, как сделать block: inline-block так же быстро, как float: left?

Вы можете найти сравнительный пример здесь: http://dev -server-2.com / перетаскивание выборки /

Ответы [ 2 ]

3 голосов
/ 04 февраля 2011

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

Это потому, что они обрабатывают плавающие элементы по-разному, и что дифференцирование должно быть сделано и для встроенного блока.

Попробуйте этот патч: 

jQuery.ui.sortable.prototype._create = function() {
    var o = this.options;
    this.containerCache = {};
    this.element.addClass("ui-sortable");

    //Get the items
    this.refresh();

    //Let's determine if the items are floating, treat inline-block as floating as well
    this.floating = this.items.length ? (/left|right/).test(this.items[0].item.css('float')) || this.items[0].item.css('display') == 'inline-block' : false;

    //Let's determine the parent's offset
    this.offset = this.element.offset();

    //Initialize mouse events for interaction
    this._mouseInit();
};

особенно этот ряд: 

this.floating = this.items.length ? (/left|right/).test(this.items[0].item.css('float')) || this.items[0].item.css('display') == 'inline-block' : false;

Это меняет поведение по умолчанию. Это поздний ответ, но я не нашел другого ответа в сети, поэтому подумал, что это поможет многим людям.

Я попытаюсь отправить запрос на исправление для jQuery, который исправляет это, но с 1.8.9 это все еще проблема.

0 голосов
/ 07 октября 2010

Я бы использовал контейнер фиксированного размера с float:left; и text-align:center; для изображения с vertical-align:middle; max-height:100%; max-width:100%; Ваши изображения будут отображаться в виде мозаики независимо от их размеров.

Не знаю, возможно ли это в вашем случае?

...