Home arrow JavaScript arrow Building `Drag-and-Drop` DIVs: Polishing the Look and Feel

Building `Drag-and-Drop` DIVs: Polishing the Look and Feel

This is the last tutorial of the series “Building drag-and-drop DIVs.” Welcome back. In three parts, this series introduces the key points for creating dragging DIV elements, for quick inclusion in web pages, emulating the behavior of many user interfaces found in current desktop applications.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 15
December 21, 2005
  1. · Building `Drag-and-Drop` DIVs: Polishing the Look and Feel
  2. · Adding elements on the fly: building DIV elements with the DOM
  3. · Nesting and styling DIV elements: defining the “DOMWindow()” function
  4. · Turning DOM-based DIVS into dragging elements: using the X library
  5. · Putting the pieces together: listing the full code for DOM-based dragging DIVs

print this article

Building `Drag-and-Drop` DIVs: Polishing the Look and Feel
(Page 1 of 5 )

As you probably know, in the previous article I demonstrated how to build realistic dragging DIVS, with only minor hassles, by using the powerful DHTML capabilities of Michael Foster’s X library. Trust me. This set of source files will make your life a lot easier, particularly if you often find yourself developing JavaScript applications that require writing complex routines for implementing cross-browser presentation and behavior layers. Whether you’re building simple DHTML effects or sophisticated AJAX-based applications, this library will be a real time saver for your client-side programming requirements.

Now, before proceeding further, let’s recapitulate the topics I explored in the second part of this series, so it will be easier going through this last tutorial. As you’ll remember from my previous installment, I developed some examples for creating dragging DIV elements. I started from a simple script, which originally displayed one DIV box, then moved to a subtly more complex example, where multiple dragging DIVs were included on the same web document.

However, until now I focused my attention on explaining the programming logic implemented in the hands-on examples, and deliberately left out any direct reference to improving the look and feel of the dragging DIVs. This probably seems like a trivial thing -– after all, you might be wondering, why not just concentrate on creating drag-and-drop DIVs, and forget all the stuff related to presentation? There’s a good reason for this. Since the process for building dragging DIV boxes has been grasped already, adding a window-like appearance to the DIVs would be definitely a good enhancement.

So, considering that polishing the look and feel of dragging DIVs can be a fun and instructive experience, that’s what I’m going to do over the course of this article. Are you interested in learning how this will be done? All right, let’s get started.

blog comments powered by Disqus

- 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 

Developer Shed Affiliates


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