Sortable (and Drag) performance enhancement

[spark]

On complex items, with background images, or complex CSS, the performance when a dragStart is fired is *very* problematic, in IE mostly. I'm have an example where it takes 12 seconds to activate the drag. With a simple change in iUtil.js getSize function, the same example takes 0.8sec to start, although, it's has not been widely tested (only IE6, IE7, FF1.5).

	getSize : function(e)
	{
		eid = document.getElementById(e.id);
		var wb = 0;
		var hb = 0;
		es = e.style;
/* here are the main changes */		
		if(eid.currentStyle)    /* if IE */
		{
			var w = eid.currentStyle.width;
			var h = eid.currentStyle.height;
		}
		else if (document.defaultView && document.defaultView.getComputedStyle)    /* if FF ? */
		{
			var w = Math.round(document.defaultView.getComputedStyle(eid,null).getPropertyValue("width"));
			var h = Math.round(document.defaultView.getComputedStyle(eid,null).getPropertyValue("height"));
		}
		else     /* or do it the interface way */
		{
			var w = jQuery.css(e,'width');
			var h = jQuery.css(e,'height');
		}

/* changes end here */

		if (jQuery(e).css('display') != 'none') {
			wb = e.offsetWidth;
			hb = e.offsetHeight;
		} else {
			oldVisibility = es.visibility;
			oldPosition = es.position;
			es.visibility = 'hidden';
			es.display = 'block';
			es.position = 'absolute';
			wb = e.offsetWidth;
			hb = e.offsetHeight;
			es.display = 'none';
			es.position = oldPosition;
			es.visibility = oldVisibility;
		}

		return {w:w, h:h, wb:wb, hb:hb};
	}

[spark]

Corrected code for FF (it wasn't returning the w and h values)

	getSize : function(e)
	{
		eid = document.getElementById(e.id);
		var wb = 0;
		var hb = 0;
		es = e.style;
		
		if(eid.currentStyle)
		{
			var w = eid.currentStyle.width;
			var h = eid.currentStyle.height;
		}
		else if (document.defaultView && document.defaultView.getComputedStyle)
		{
			var w = Math.round(parseInt(document.defaultView.getComputedStyle(eid,null).getPropertyValue("width")));
			var h = Math.round(parseInt(document.defaultView.getComputedStyle(eid,null).getPropertyValue("height")));
		}
		else
		{
			var w = jQuery.css(e,'width');
			var h = jQuery.css(e,'height');
		}

		if (jQuery(e).css('display') != 'none') {
			wb = e.offsetWidth;
			hb = e.offsetHeight;
		} else {
			oldVisibility = es.visibility;
			oldPosition = es.position;
			es.visibility = 'hidden';
			es.display = 'block';
			es.position = 'absolute';
			wb = e.offsetWidth;
			hb = e.offsetHeight;
			es.display = 'none';
			es.position = oldPosition;
			es.visibility = oldVisibility;
		}

		return {w:w, h:h, wb:wb, hb:hb};
	},

[stefan]

I will run some test.

[stefan]

I ran some test and there was not any speed improvements.

[spark]

Mostly in Internet Explorer, *with complex* layouts. Try putting a few elements, Forms, background images and stuff... I'll pack some later, they are not accessible to me now :

thanks stefan spark

[stefan]

i tried to duplicate your situation, complex forms, backgrounds with transparency etc. If you can provide a demo will be very nice and helpfull.