Home arrow JavaScript arrow Building `Drag-and-Drop` DIVs: An Advanced Approach
JAVASCRIPT

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


This is it, the article you were waiting for! Welcome to the second tutorial of the series “Building drag-and-drop DIVs.” In three parts, this series teaches you how to create realistic dragging DIVs, in order to boost the capabilities of web-based user interfaces, by introducing the “drag-and-drop” features found in many popular desktop applications.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 10
December 14, 2005
TABLE OF CONTENTS:
  1. · Building `Drag-and-Drop` DIVs: An Advanced Approach
  2. · Creating cross-browser “dragging” DIVs: coding a simple script
  3. · Getting the dragging script completed: adding some CSS rules and (X)HTML markup
  4. · Going one step further: setting up multiple dragging DIVs

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Building `Drag-and-Drop` DIVs: An Advanced Approach
(Page 1 of 4 )

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.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 5 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials