Opened 8 years ago

Closed 6 years ago

#6942 closed bug (worksforme)

Sortable has glitches when working with elements that are "display: inline-block"

Reported by: jishi Owned by:
Priority: minor Milestone: 2.0.0
Component: ui.sortable Version: 1.8.9
Keywords: Cc:
Blocked by: Blocking:

Description

I have came across a behavior where sortable works fine using floats, but when using inline-block (which most of the time is a better alternative for supported browsers) it doesn't really work as good as the float approach.

example here http://jsbin.com/ufajo4/

red boxes are inline-block, green boxes are floated. Notice how the red example is much less accurate and sometimes misses to place the placeholder correctly.

I created a 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, threat 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();

};

With the only change being this row:

	//Let's determine if the items are floating, threat 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;

to treat inline-block the same way as floated elements. It works fine on my testcase, but I can't say for other scenarios.

Change History (3)

comment:1 Changed 8 years ago by jishi

This was tested using FF4.0b10 But I'm guessing this applies to 3.6 as well.

comment:2 Changed 6 years ago by Scott González

Milestone: 1.9.02.0.0

comment:3 Changed 6 years ago by mikesherov

Resolution: worksforme
Status: newclosed

Thanks for taking the time to contribute to the jQuery UI project! I can no longer reproduce the issue using the latest jQuery and jQuery UI. http://jsfiddle.net/T8gkC/

If you can still reproduce it, please feel free to reply to this ticket with a test case showing the problem. Thanks!

Note: See TracTickets for help on using tickets.