jQuery UI drag/drop sorting comparision using float:left vs display:inline-block

Question

I have two examples here, only difference between these two example are one uses display:inline-block and other one uses float:left,

li.doc_item{display:inline-block;} vs li.doc_item{float:left;}

My problem is display:inline-block sorting is not as fast or responsive as float:left. I want to use display:inline-block because thumbnails that I am re-ordering sometimes can vary in size and float:left doesn't work well when thumbnails have different height and width.

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

You can find comparative example here: http://dev-server-2.com/drag-drop-sample/

Answer 1

I came across the same issue, and figured I should find out what's causing it.

It's because they treat floated elements differently, and that differentiation should be made on inline-block as well.

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

it's especially this row:

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

That changes the default behaviour. This is a late answer, but I couldn't find any other answer around the net so I thought this would help a lot of people.

I will try to submit a patch-request for jQuery that fixes this, but as of 1.8.9 this is still a problem.