Collapsible,Drag&Drop javascript panels with Dojo

Articles

DHTML Gallery

.NET

MyBlog

About Me

FAQ

Adding Subtitles to videos in Silverlight
This article is about adding sutitles to 'any' video hosted inside a Silverlight plugin.

Polls
@ashishware.com

Which data exchange format do you prefer the most for webservices

Vote Now!

Collapsible,Drag&Drop javascript panels with Dojo

This article applies to Dojo version 0.4. The latest version is 1.2.0

Click here to see the demo

This article describes a way to create a collapsible and draggable panels using javascript. Such UI elements are becoming very popular and are being used with AJAX to create awesome UI. There can be many ways of doing this. Here I will be using Dojo, which is a high quality open source javascript toolkit. The main advantage is multiple browser support and the easy to use features it offers.

Introduction
You can download Dojo form this site. If you are completely new to Dojo, you may want to have a look at the example and pages in the test folder. This will give you a good idea of what Dojo is meant for and how to use it in your webpages. Here is a good article for getting started with dojo. The latest release of Dojo offers any cool animation effects, which have rendered my old collapsible panel scripts obsolete. We will be using Dojo’s default Drag&Drop functionality, along with the 'wipeIn' and 'wipeOut' animation .Our purpose is to combine these functionalities with minimum code possible to achieve our functionality.

The Collapsible panel
The figure below shows the basic layout for the panel(without applying CSS).

It is basically a table with two rows. The first row has two cells, one of which has + and – Images. The second row, contains a div , that will hold the content. Passing the id of this div to ‘wipeIn()’ and ‘wipeout()’, will case the panel to minimize and maziminse.Given below is the markup and script for the panel.

<table id="w1" cellspacing=0><tr class="TRtitle">
<td class="TDtitle">Dojo</td><td class="tdicons">
<IMG  onclick="wipeOut('l1')" alt=- src="images/minus.gif">
<IMG onclick="wipeIn('l1')" src="images/plus.gif" ></td></tr>
<tr><td colspan=2>
<div id="l1" class="DIVcontainer">
<div class="DIVinner">
Dojo is a cool javascript library.You can find more on DOJO here.This
example uses drag&drop and animations from Dojo
</div>
</div>
</td></tr>
</table>

On the 'click' events of the(-/+) images, we call 'wipeIn' and 'wipeOut' respectively.I have added an extra line in these functions, so that wipeIn and wipeOut action only happens, when it is meant to be. I mean an already hidden panel, need not be wiped in and a visible panel , need not be wipedOut. Here, I needed to add the following line to get the code working in FireFox. In IE the line 'dojo.style.getStyle(elId,"height")' returns ‘auto’ while in FireFox it returns the actual height (eg 100px).

function wipeOut(elId){
if(dojo.style.getStyle(elId,"height")!='auto' && dojo.style.getStyle(elId,"height")!='100px' )return;
dojo.fx.wipeOut(dojo.byId(elId), 300);}
			
function wipeIn(elId) {
if(dojo.style.getStyle(elId,"height")!='0px')return;
dojo.fx.wipeIn(dojo.byId(elId), 300);}

Drag and Drop
With Dojo drag and drop can be implemented using DIV’s. Using javascript, a DIV can be made to act as a 'source' or 'target'. A 'source' is something that can be dragged, and a target is something onto which a 'source' can be dropped . Following script shows creating of sources and targets.

function init(){
	new dojo.dnd.HtmlDragSource("w1", "left");
	new dojo.dnd.HtmlDragSource("w2", "left");
	new dojo.dnd.HtmlDragSource("w3", "left");
	new dojo.dnd.HtmlDragSource("w4", "right");
	new dojo.dnd.HtmlDragSource("w5", "right");
	new dojo.dnd.HtmlDragSource("w6", "right");
	new dojo.dnd.HtmlDragSource("w7", "center");
	new dojo.dnd.HtmlDragSource("w8", "center");
	
	new dojo.dnd.HtmlDropTarget("leftdiv", ["left","right"]);
	new dojo.dnd.HtmlDropTarget("rightdiv",["left","right"]);
	new dojo.dnd.HtmlDropTarget("centerdiv",["center"]);
	}

Here, ‘left’,’right’ and ‘center’ represent a ‘type’ of source. While declaring a target, you can pass an array of typenames , indicating that this target can accept following types of sources. For example, the target ‘leftdiv’ can accept any source of ‘left’ or ‘right’ type. This is all we do to implement drag and drop. Finally we ‘connect’ the init() function to the ‘loaded’ event , so that it executes only after the whole document has been loaded.

dojo.event.connect(dojo, "loaded", "init");

Finally
Check out the demo page to see it in action.There you will find the proper working code. The best part is we could make pretty descent looking panels, within very little time.Also we used very little ‘glue’ code, so we won’t require much testing. With some creativity and cool graphics these panels can be made to look very professional, but I am certainly not good at those ;-) .