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

i have 2 examples here, difference between these 2 example 1 uses display:inline-block , other 1 uses float:left,

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

my problem display:inline-block sorting not fast or responsive float:left. want use display:inline-block because thumbnails re-ordering can vary in size , float:left doesn't work when thumbnails have different height , width.

any question how make block:inline-block fast float:left ?

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

i came across same issue, , figured should find out what's causing it.

it's because treat floated elements differently, , differentiation should made on inline-block well.

try patch:

jquery.ui.sortable.prototype._create = function() {     var o = this.options;     this.containercache = {};     this.element.addclass("ui-sortable");      //get items     this.refresh();      //let's determine if items floating, treat inline-block floating     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 parent's offset     this.offset = this.element.offset();      //initialize mouse events interaction     this._mouseinit(); }; 

it's 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 default behaviour. late answer, couldn't find other answer around net thought lot of people.

i try submit patch-request jquery fixes this, of 1.8.9 still problem.