Draggable Portlets (part 1)

Overview

This is the third installment of a series of tutorials about Solution Grove's Web 2.0 Demo Page. In this tutorial I show you how to make elements, like the portlets in our demo, draggable, specifically the "Add Stuff" and "Map" portlets.

Prerequisites

The usual prerequisites apply. If you've tried the first two tutorials you should probably have an OpenACS instance running with Ajax Helper installed.

HTML Element

We start by creating html elements that users of your web application can drag. In the case of the demo page we used div elements with CSS styles. The css styles define the background color, width, height and other attributes of the div element. Here's what a draggable portlet looks like.

	< div id="adminportlet" class="portlet" style="position:absolute;
overflow:hidden;
z-index:2;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
padding-top:1px;
width:300px;
height:300px;
top:30px;
left:10px;" >
< /div >

The html element above should be in your .adp file.

The div can contain text or other html elements. When the parent div is dragged, all the elements inside it will be dragged along with it.

Draggable Javascript Code

Now that you have an html element that you want your users to drag, we should now write the code to make the element draggable. The ajax helper proc to automatically generate the scriptaculous javascript code to make the html element draggable is ah::draggable

The tcl file should contain

	set draggable_script [ah::draggable -element "adminportlet"]
set jscript [ah::enclose_in_script -script $draggable_script]

The script above tells ajax helper to generate javascript code to make the adminportlet draggable. The script is stored in the variable jscript. ah::enclose_in_script will enclose the resulting javascript in < script > tags. When compiled by the templating system, it will look like this ...

	< script language="JavaScript" type="text/JavaScript" > 
new Draggable ('adminportlet',{});
< /script >

The adp file should have this piece of code at the bottom, right before the < /body > tag

	@jscript;noquote@

Practical Example

This is a very simple example of a div element (test) that is made draggable using the technique above.

1. Create the tcl file (tutorial3.tcl) with the following

		set sources [ah::js_sources -default]
	set draggable_script [ah::draggable -element "test"]
	set jscript [ah::enclose_in_script -script $draggable_script]	
	

2. Create an adp file (tutorial3.adp) with the following

		< html >
	< head >
	< title > Tutorial Three < /title >
	@sources;noquote@
	< /head >
	< body >
	< div id="test" class="portlet" style="position:absolute;
	background-color:green;
	overflow:hidden;
	z-index:2;
	margin-bottom:10px;
	margin-left:auto;
	margin-right:auto;
	padding-top:1px;
	width:300px;
	height:300px;
	top:30px;
	left:10px;" >
	

	This portlet is draggable .... drag me.
	
	< /div >
	@jscript;noquote@
	< /body >
	< /html  >  
	

View this example here

More Draggables

There are many options that you can pass to the draggable script. One option allows you to specify an element inside that div that can act as a handle. The handle is where your mouse should drag to be able to move the whole portlet. Refer to the scriptaculous documentation for more available options.