Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

JavaScript and jQuery: Web Apps as Highly Interactive as Desktop Apps : Page 2

Use the advanced CSS features of JavaScript and jQuery to create web applications that behave and look like desktop applications, fueled by drag-and-drop, mouse selection, panning, zooming, and more.


advertisement

The Setting

To keep the code simple, you will start from the source code shown in Listing 1. It acts as a mockup for a complete application; it is a simple web page that contains four DIVs, representing the visual items with which the user interacts. Figure 1 shows how it appears.

Click to enlarge

Figure 1. The Mockup Web Page with Four Visual Items: This is a simple web page that contains four DIVs, representing the visual items with which the user interacts.



Dragging and Repositioning Elements

Element dragging and repositioning are the first features you have to add to move closer to the desktop paradigm. This is quite easy to do thanks to jQuery UI. Simply add the following snippet to the head section of the mockup page:

<html> <head> <!-- ... omissis --> <script> $(document).ready(function() { $('.box').draggable({ opacity: 0.5, cursor: 'move', zIndex: 10000 }); }); </script> <style type="text/css" media="screen"> .box { cursor: move; } </style> </head> <!-- ... omissis --> </html>

This snippet uses the draggable() mutator method on all the elements that have the box CSS class. This method makes the affected DOM elements aware of mouse clicks and dragging.

You can customize the drag behavior with a set of options. In the example, you declare that during drag items should be semitransparent, a special cursor should be used to better express the intention to the user, and dragged items should float on top of everything else (by raising their z-index). You can now move items around in the page (see Figure 2).

Click to enlarge

Figure 2. Items Are Now Freely Floating on the Page: You can declare that dragged items should float on top of everything else.

You can also attach listeners that will be notified at various stages during the drag, as described in the official documentation. You can leverage this to provide group dragging: multiple elements moving concurrently when you drag one of them. You will use this later on, along with selection management, so that the user will be able to select and move items on the page, just like he or she does on a desktop application.

To implement group dragging you need to add three listeners, respectively, for the beginning, duration, and conclusion of the mouse drag. The listeners record the relative positions of all the elements that will move, and then update the affected elements' positions while the one under the cursor is being dragged. At the end, they clean up the data temporarily used. The resulting code is a bit verbose and is summed up in Listing 2. The downloadable source code contains the whole working example.

Handling Selections

Selections allow users to limit the scope of the actions they want to perform on application entities by choosing the ones to which the action is targeted. On a desktop application, users typically select items either by clicking on them or using box selection. When using box selection, the user draws a rectangle around the elements he or she wants to pick.

To implement user selections, first define a helper class, SelectionManager, that exposes basic methods to alter the selection state of an item:

<script> SelectionManager = function() {}; SelectionManager.prototype.select = function(id) { $('#' + id).addClass('ui-selected'); }; SelectionManager.prototype.unselect = function(id) { $('#' + id).removeClass('ui-selected'); }; SelectionManager.prototype.isSelected = function(id) { return $('#' + id).hasClass('ui-selected'); }; // Expose it as a global variable $sel = new SelectionManager(); </script>

Next, define two jQuery callbacks to respond to select-by-click and box selection. Listing 3 shows the callbacks code, and Figure 3 shows the box-selection case.

Click to enlarge

Figure 3. Using Box Selection to Select Multiple Items Together: Here is the result of propagating drag movements from the scroll layer to the universe layer.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap