JavaScript
  Home arrow JavaScript arrow Building `Drag-and-Drop` DIVs: Polishing t...
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
JAVASCRIPT

Building `Drag-and-Drop` DIVs: Polishing the Look and Feel
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 4 stars4 stars4 stars4 stars4 stars / 8
    2005-12-21

    Table of Contents:
  • Building `Drag-and-Drop` DIVs: Polishing the Look and Feel
  • Adding elements on the fly: building DIV elements with the DOM
  • Nesting and styling DIV elements: defining the “DOMWindow()” function
  • Turning DOM-based DIVS into dragging elements: using the X library
  • Putting the pieces together: listing the full code for DOM-based dragging DIVs

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


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


    (Page 1 of 5 )

    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.

    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.

    More JavaScript Articles
    More By Alejandro Gervasio


       · In this last part of the series, the powerful functionality of the X library is...
     

    JAVASCRIPT ARTICLES

    - Building Dynamic Shadows with JavaScript and...
    - Active Client Pages: Chrys`s Approach
    - The Script Approach to Active Client Pages: ...
    - Principles of Active Client Pages: the Scrip...
    - Active Client Pages: the Script Approach
    - Building an RTF-capable Form with the Ext JS...
    - Creating a Multi-Tabbed Online Form with the...
    - jQuery Overview
    - Constructing a Multi-Column Online Form with...
    - Grouping Field Sets on Dynamic Web Forms wit...
    - Building Dynamic Web Forms with the Ext JS F...
    - More on JavaScript Array Objects
    - Methods of the DOM Location Object
    - The DOM Location Object Properties
    - Handling Remote Files with JavaScript Click ...







    © 2003-2009 by Developer Shed. All rights reserved. DS Cluster 1 hosted by Hostway
    Stay green...Green IT