Building `Drag-and-Drop` DIVs: An Advanced Approach

In the previous article, I went through the development of a simple script, which allowed us to build dragging DIV elements, by utilizing a couple of easy-to-grasp functions that combined the appropriate sequence of event handlers, in order to emulate a real “drag-and-drop” mouse effect. Keeping this idea in mind, I first drew in plain English the general guidelines for handling the “mousedown”, “mouseup” and “mousemove” events within the scope of the document object, and then translated the underlying “dragging” theory into concrete JavaScript code.

However, when working with large client-side applications, the script I wrote previously may be a little inflexible and hard-to-maintain, for including in routines that implement the behavior of user interfaces (at least those ones that use JavaScript for constructing behavior layers). From a programmer’s point of view, it’s best to have a highly customizable and modular library, which can be used as the workhorse for creating cross-browser dragging DIV elements, without being concerned too much about how DHTML is handled behind the scenes.

In accordance with the above discussed concepts, over this second article of the series, I’ll take a reusable approach to building “drag-and-drop” DIVs, and utilize the functionality provided by Michael Foster’s JavaScript X library. In my opinion it is one of the best cross-browser DHTML library available on the Web. It will not only allow you to create dragging DIVs, but do a lot more astonishing DTHML things, in a true cross-browser fashion.

Having outlined the general guidelines for this tutorial, it’s time to leap forward and begin creating cross-browser, dragging DIVs. Let’s get started.