Sorting - adding left: top: css propertyes

While I can not reproduce this problem using http://jqueryui.com/demos/sortable/ or http://jqueryui.com/demos/sortable/portlets.html I still experience this locally using 1.8.2.

When element is being moved it receives position:absolute and dynamically-changed left and top. That's totally right and correct!

However after finishing movement one of following actions should be performed:

1. All styles removed (position, left, top) = the "cleanest" solution

2. Position changed to static (or just removed, as static is default) and left and top left - this will work as left and top are ignored for static

3. Position changed to relative, plus left and top zeroed or removed.

If you're not sure how positioning works, check http://www.w3.org/TR/CSS2/visuren.html#choose-position

Actions from previous comment correctly styled:

1. All styles removed (position, left, top) = the "cleanest" solution

2. Position changed to static (or just removed, as static is default) and left and top left - this will work as left and top are ignored for static

3. Position changed to relative, plus left and top zeroed or removed.

The problem is exposed when we use both: sortable and resizable. In such a case "position: relative;" is applied which comes from resizable styles.

This affects only Opera as in Opera left and top are not zeroed.

Possible workaround:

$('ul').sortable({
	update: function() {
		/* workaround for http://dev.jqueryui.com/ticket/4792 */
		$(this).find('li').css('left', '0').css('top', '0');
	}
});

this._getRelativeOffset() in jQuery UI will return some object with "top" and "left" properties that are some pixels different from what they are in Chrome. The reason is that Opera's getComputedStyle() method returns pixel values for top/left/bottom/right for certain relatively positioned elements without explictly specified values for those properties. WebKit and Gecko return 'auto' here.

(Opera tracks this issue as CORE-13758 and intends to fix it and align with other browsers, likely in the next major update after 10.6x, so one option here is to do nothing and wait for an Opera fix)

Another potential hack/workaround would be rewriting window.getComputedStyle() - of course with the risk that it will now behave differently to what some other component on the page requires, so use with caution:

(function(gcs, gpv){
	window.getComputedStyle=function(){
		try{
			var result=gcs.apply(this, arguments);
		}catch(e){
			throw e;
		}
		var elm=arguments[0];
		if( /\\d*px/.test(result.top) && elm.style.top === ''  ||  /\\d*px/.test(result.left) && elm.style.left === '' ){
			result.getPropertyValue=function(name){
				var result=gpv.apply(this,arguments);
				if(name=='top' || name=='left')return 'auto';
				return result;
			}
		}
		return result;
	}
})(window.getComputedStyle, CSSStyleDeclaration.prototype.getPropertyValue)

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/Xb6VN/

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