Implementing "Drag and Drop" feature in Web Applications

Today I would like to shed some light on how best can we implement drag n feature in web applications.Gone are the days of lame users who used to browse web sites just to gather some information,send mails,watch movies,online shopping etc.Now-a-days users want more and more interaction and savvy stuff to be seen on the websites.With the advent of new technologies,users tastes have also changed and so to their needs and demands.I personally like the liveliness of new Yahoo mail,Personal google mail or iGoogle.This makes me wonder about the sleekness of drag and drop feature implementation in these sites and how easy it has become to implement such scenarios using frameworks & APIs like Yahoo UI(very informative),Google Web Toolkit(my personal best),Ajax,Dojo,SWT,Scriptaculous or for that matter the cumbersome JavaScript(JavaScript is not everyone's language of choice),phew so many choices and options.
If you are a Web Developer,now a days it has become a de-facto standard or necessity for you to have experience in implementing drag and drop features in the web applications you are dealing at customer sites.Here I would like to present different solutions that can be used(& how) to develop drag and drop features in a website.

First, the basic definition of Ajax is ,AJAX (Asynchronous JavaScript and XML), or Ajax, is a group of inter-related web development techniques used for creating interactive web applications. A primary characteristic is the increased responsiveness and interactiveness of web pages achieved by exchanging small amounts of data with the server "behind the scenes" so that the entire web page does not have to be reloaded each time the user performs an action. This is intended to increase the web page's interactivity, speed, functionality, and usability.

AJAX is asynchronous in that extra data is requested from the server and loaded in the background without interfering with the display and behavior of the existing page. JavaScript is the scripting language in which AJAX function calls are usually made.[1] Data is retrieved using the XMLHttpRequest object that is available to scripting languages run in modern browsers. There is, however, no requirement that the asynchronous content be formatted in XML.

AJAX is a cross-platform technique usable on many different operating systems, computer architectures, and web browsers as it is based on open standards such as JavaScript and the DOM. There are free and open source implementations of suitable frameworks and libraries.

To start with let us learn how can we implement AJAX style drag and drop using Scriptaculous,is a collection of Web 2.0 style JavaScript libraries that help web developers to easily add visual and ajax effects to projects.It provides easy-to-use cross-browser support user interface Javascript libraries.For example visit here,Demo.
First download the latest version and extract it folder of your choice and then put prototype.js, scriptaculous.js, builder.js, effects.js, dragdrop.js, slider.js and controls.js in a directory of your website, e.g. /javascripts and then provide a link to the scripts in the head of your document like,

script src="javascripts/prototype.js" type="text/javascript"
script src="javascripts/scriptaculous.js" type="text/javascript"

By default, scriptaculous.js loads all of the other javascript files necessary for effects, drag-and-drop, sliders, and all of the other script.aculo.us features.
You can also use effects inside event handlers and you can pass extra options to the effect like ‘duration’, ‘fps’ (frames per second), and ‘delay’.
"div onclick="new Effect.BlindUp(this, {duration: 16})"
For the source code for implementing a simple shopping cart using Script.aculo.us,visit here

2)Next in line is DOJO,Dojo is an Open Source toolkit that allows you to easily build dynamic capabilities into web pages and any other environment that supports JavaScript. Dojo provides components that let you make your sites more useable, responsive, and functional. With Dojo you can build degradeable user interfaces more easily, prototype interactive widgets quickly, animate transitions, and build AJAX-based requests simply. Dojo layers these capabilities onto a lightweight packaging system which forms the core of Dojo. When you write scripts with Dojo, you can include as few or as many of the available APIs as you need, and your app will only include what it uses.
Easily extensible Drag and Drop support in DOJO is provided by this API,dojo.dnd.*
For the list of classes and methods in this API , visit http://manual.dojotoolkit.org/dnd.html
For a simple example on implementing drag and drop using DOJO,visit here.

3)Yahoo UI -Drag & Drop
The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. The YUI Library also includes several core CSS resources. All components in the YUI Library have been released as open source under a BSD license and are free for all uses.
Download YUI version 2.4.1, including full API documentation and more than 230 functional examples from Sourceforge.
For an example to implement drag and drop using Yahoo UI , visit here

4)And finally,Google Web Toolkit(my fav)
Google Web Toolkit (GWT) is an open source Java software development framework that makes writing AJAX applications like Google Maps and Gmail easy for developers who don't speak browser quirks as a second language.
With GWT, you can develop and debug AJAX applications in the Java language using the Java development tools of your choice. When you deploy your application to production, the GWT compiler translates your Java application to browser-compliant JavaScript and HTML.Download GWT from here.
Here's the GWT development cycle:
1. Use your favorite Java IDE to write and debug an application in the Java language, using as many (or as few) GWT libraries as you find useful.
2. Use GWT's Java-to-JavaScript compiler to distill your application into a set of JavaScript and HTML files that you can serve with any web server.
3. Confirm that your application works in each browser that you want to support, which usually takes no additional work.
Some of the benefits of developing with GWT:
* You can use all of your favorite Java development tools (Eclipse, IntelliJ, JProfiler, JUnit) for AJAX development.
* Static type checking in the Java language boosts productivity while reducing errors.
* Common JavaScript errors (typos, type mismatches) are easily caught at compile time rather than by users at runtime.
* Code prompting/completion is widely available.
* Automated Java refactoring is pretty snazzy these days.
* Java-based OO designs are easier to communicate and understand, thus making your AJAX code base more comprehensible with less documentation

http://code.google.com/p/gwt-dnd/,is GWT extension library which adds drag-and-drop support to new or existing applications built with the Google Web Toolkit (GWT).Visit here to know how to add GWT to Eclipse IDE.And sample source code is here

Other options are,Mochikit

Also read this article for implementing drag and drop using Java 2.
http://www.javaworld.com/javaworld/jw-03-1999/jw-03-dragndrop.html

Suggested Video Tutorial
Google Web Toolkit

Print this post