Bug Tracker

#841 closed enhancement (wontfix)

Opened January 17, 2007 07:05PM UTC

Closed February 11, 2007 01:29PM UTC

Last modified March 15, 2012 05:14PM UTC

Sortable (and Drag) performance enhancement

Reported by: spark Owned by: stefan
Priority: major Milestone:
Component: interface Version: 1.1
Keywords: sortable, drag, performance Cc:
Blocked by: Blocking:
Description

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};
	}
Attachments (0)
Change History (6)

Changed January 17, 2007 08:08PM UTC by spark comment:1

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};
	},

Changed January 18, 2007 07:29AM UTC by stefan comment:2

I will run some test.

Changed January 18, 2007 10:19AM UTC by stefan comment:3

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

Changed January 18, 2007 03:10PM UTC by spark comment:4

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

Changed January 18, 2007 06:50PM UTC by stefan comment:5

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

Changed February 11, 2007 01:29PM UTC by stefan comment:6

resolution: → wontfix
status: new → closed