Drag and drop in web applications

Modern web applications often have drag and drop interfaces that allow the user to change the layout of a page (like order and place of menu elements), organize personal content (like files and folders) or express selections by movement of control elements. Users are used to such operations from desktop applications, making such web applications easier to understand and use for less tech-savvy users. HTML5 provides built in capabilities for basic drag and drop operations, but usage of of browsers that support HTML5 is still rather low. The usefulness of HTML5 grows every day, but as long as Internet Explorer 6 is still used developers need to look for alternative solutions for many cases. To make an application work on legacy browsers, one must work around the limitations of HTML, which was originally designed for static web documents. While HTML offers rich capabilities to format the contents of a document as you write it, the elements displayed on a HTML page are immutable and don't allow the user to change or move them as he browses the page. The bottom line is that drag and drop can't be implemented by pre-HTML5 HTML alone and requires some external technology to work.
2 answers

Implementation of drag and drop in JavaScript

Such functionality can be implemented in JavaScript by addition and removal of events. The element that should support drag and drop needs an onmousedown event that calls the function trackElement.
trackElement doesn't do much except for adding two more elements when the mouse button is pressed on the element in question.

The moveElement function is then called each time the user moves his mouse. It updates the position of the element to the position of the mouse (in relation to the element's size). The event is added to the whole window because the user can move the mouse faster than the browser renders, making it possible to outrun the movement of the element.

Finally, stopTracking is called when the user releases the mouse button. It merely removes the events that track the mouse movement and wait for the release of the button.

Code:

var trackedObject;


function trackElement(event) {
trackedObject = event.target;
window.addEventListener("mousemove", moveElement, false);
trackedObject.addEventListener("mouseup", stopTracking, false);
}


function moveElement(event) {
trackedObject.style.top = event.clientY - parseInt(trackedObject.style.height) / 2;
trackedObject.style.left = event.clientX - parseInt(trackedObject.style.width) / 2;
}


function stopTracking(event) {
window.removeEventListener("mousemove", moveElement, false);
trackedObject.removeEventListener("mouseup", stopTracking, false);
}

Taggings:

Drag and Drop using jQuery

The jQuery UI plugin for one of the big players in js libraries: jQuery, already features a full implementation of window-like behavior for div elements, along with typical ui elements such as buttons, dialogs, progress bars etc. all implemented in js.

Code snippets and tutorials on how to use jQuery UI can be found on

http://jqueryui.com/demos/droppable/

the elements along with their functionality such as resizing or drag and drop can mostly be realized in a few lines.

One thing to note is that certain behavior such as resizing will only work if you also have a jQuery UI theme installed. Themes for your website can be generated using a wizard which can be found on the jqueryui website.

Taggings: