JQuery Compare vertical sort and drag using float: left vs display: inline-block

Question

I have two examples, the difference between the two examples, one uses display: inline-block, and the other uses float: left,

li.doc_item {display: built-in block;} against li.doc_item {float: left;}

My problem is the mapping: inline-block sorting is not as fast or responsive as float: left. I want to use display: inline-block, because the thumbnails that I reorder can sometimes vary in size and float: the left one does not work well when the thumbnails have different heights and widths.

Any question is how to make a block: an inline block is as fast as float: left?

Here you can find a comparative example: http://dev-server-2.com/drag-drop-sample/

Answer 1

I ran into the same problem and thought that I should find out what causes it.

This is because they handle floating elements differently and that differentiation must also be done on the inline unit.

Try this patch:

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

    //Get the items
    this.refresh();

    //Let 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 determine the parent offset
    this.offset = this.element.offset();

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

this is especially this line:

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

This changes the default behavior. This is a late answer, but I could not find another answer on the net, so I thought it would help a lot of people.

I will try to submit a patch for jQuery that fixes this, but with 1.8.9 this is still a problem.

Answer 2

float:left; text-align:center; vertical-align:middle; max-height:100%; max-width:100%; .

, ?