Increasing drag/drop performance with iframes, images, and forms

If you’re using YUI, Prototype, or MooTools and you’re building an application that involves draggable components containing iframes, images, and/or forms, here’s a quick tip to maximize performance during the onDrag event.

Here is a code snippet of basic markup that’ll represent our draggable component.

<div class="moduleContainer">
	<div class="moduleHead">Draggable Title</div>
	<div class="moduleBody">Draggable Content</div>
</div>

Inside your moduleBody, you could have a plethora of component types, but let’s primarily focus on more complex and performance-taxing ones: forms, iframes, images, and embeds.

Within your startDrag event, you can define the following:

var $$ = YAHOO.util.Selector.query;
var elGroup = $$('div.moduleContainer form, div.moduleContainer iframe, div.moduleContainer img, div.moduleContainer embed');

for(var i = 0, len = elGroup.length; i < len; i++) {
    elGroup[i].style.visibility = "hidden";
    //You would need to set it back to visible on your endDrag event.
}

The reason why we set the element's visiblity property to hidden is because an element will not receive events if it is hidden. During your onDrag(e) event, you'll notice that every time the element reaches a pixel threshold (usually every 3 pixels), it will invoke the onDrag event. This can get quite taxing while you're dragging the component around on the viewport. Users will definitely notice the lag.

The reason I only apply this selector to the 4 tags is because of their inherent complex functionality. Iframes have the ability to include content from a source, where as, spans or paragraphs are simply text. When the onDrag event is invoked, I ran into several problems where every time the component would meet a pixel threshold, the iframe would reload its src attribute. Spans, headers, and paragraphs won't tax your application's performance during a drag interaction.