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 / 13
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

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

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




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