Skip to main content

Search and Top Navigation

#6942 closed bug (worksforme)

Opened February 04, 2011 02:53PM UTC

Closed November 08, 2012 02:47AM UTC

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.

Attachments (0)
Change History (3)

Changed February 04, 2011 02:54PM UTC by jishi comment:1

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

Changed October 11, 2012 02:54PM UTC by scottgonzalez comment:2

milestone: 1.9.02.0.0

Changed November 08, 2012 02:47AM UTC by mikesherov comment:3

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!