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 comment:1
Changed October 11, 2012 02:54PM UTC by comment:2
milestone: | 1.9.0 → 2.0.0 |
---|
Changed November 08, 2012 02:47AM UTC by comment:3
resolution: | → worksforme |
---|---|
status: | new → closed |
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!
This was tested using FF4.0b10 But I'm guessing this applies to 3.6 as well.