Designing Web Interfaces

Chapter 2. Drag and Drop

One of the great innovations that the Macintosh brought to the world in 1984 was Drag and Drop. Influenced by the graphical user interface work on Xerox PARC’s Star Information System and subsequent lessons learned from the Apple Lisa, the Macintosh team invented drag and drop as an easy way to move, copy, and delete files on the user’s desktop.

It was quite a while before drag and drop made its way to the Web in any serious application. In 2000, a small startup, HalfBrain,^[11] launched a web-based presentation application, BrainMatter. It was written entirely in DHTML and used drag and drop as an integral part of its interface.

Drag and drop showed up again with another small startup, Oddpost,^[12] when it launched a web-based mail application (Figure 2-1) that allowed users to drag and drop messages between folders.

Figure 2-1. The Oddpost web mail client performed like a desktop mail application and included drag and drop as a key feature

The biggest hindrance was the difficulty in saving the user’s state after a drag was completed without refreshing the page. It was possible, but the underlying technology was not consistent across all browsers. Now that the technologies underlying Ajax^[13] have become widely known and a full complement of browsers support these techniques, Drag and Drop has become a more familiar idiom on the Web.

Interesting Moments

At first ...