Inside Technique : Targeted Drag and Drop
By Rajeev Hariharan

When Site Builder Network (now MSDN Online) unleashed their famous Alien Head demo on the unsuspecting public some years ago, they heralded in the new era of Dynamic HTML, and the transformation of Internet Explorer from what was then the worst third-generation browser in the world, into the sleek and awesomely powerful beast we have today. Many moons have passed since then, and every developer site worth it's salt has a cool DHTML drag-and-drop demo. So why would anyone want another article on the subject? Well, just check out the demo below and see for yourself... (IE4/5 only).

As you have guessed by now, this article will focus on applications of DHTML drag-and-drop that require the dragged element to be dropped onto certain designated target areas on the page. While there are potentially innumerable applications of this technique, the above demo is one of my favourites because the type of functionality required makes it a natural candidate for targeted drag and drop. Try to think of an implementation of a Top 5 Ranking page which does not use drag-and-drop, and you'll see what I mean.

The above demo is a simplified version of the technique I used in the Explorer Solitaire game. What you see in the demo is actually an optical illusion achieved with some fast image-switching and a single absolutely positioned DIV - but we'll come to that later.

In this article we will look at

• Hot Tracking - A lightweight version of this technique
• Setting up and coding the Drag
• Target acquisition using the Collision Detection Algorithm

First of all we will look at a little puzzle, and see how Hot Tracking was used to implement it.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.