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

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
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

Building `Drag-and-Drop` DIVs: Polishing the Look and Feel - Nesting and styling DIV elements: defining the “DOMWindow()” function
(Page 3 of 5 )

Having at my disposal the “DOMDiv()” function, which is tasked with building each block element that comprises the whole dragging structure, what I’ll do next is define another useful function, “DOMWindow()”, that simply will create the DIV elements corresponding to each section of the DOM-based window. So, let’s first have a look at its signature, and then see how it works:

function DOMWindow(x,y,w,h,title,content){
 // create window structure
 var winBody=new DOMDiv(x,y,w,h,'#ccc');
 // assign ID attribute
 winBody.setAttribute('id','domdiv');
 winBody.style.border='2px outset #aaa';
 winBody.style.cursor='default';
 // create window title bar
 var titleBar=new DOMDiv(4,4,w-14,18,'#00c');
 titleBar.style.font='bold 10pt Arial';
 titleBar.style.color='#fff';
 titleBar.style.paddingLeft='4px';
 // create window 'content area'
 var contentArea=new DOMDiv(4,26,w-10,h-40,'#fff');
 contentArea.style.width=document.all?(parseInt
(contentArea.style.width)-4)+'px':(parseInt
(contentArea.style.width)-7)+'px';
 contentArea.style.border='1px inset #ccc';
 contentArea.style.overflow='auto';
 contentArea.style.padding='0px 2px 0px 4px';
 contentArea.style.font='normal 10pt Arial';
 // append title to title bar
   titleBar.appendChild(document.createTextNode(title));
 // append text to content area
 contentArea.appendChild(document.createTextNode(content));
 // append title bar
 winBody.appendChild(titleBar);
 // append content area
   winBody.appendChild(contentArea);
 // append window to document tree
 document.getElementsByTagName('body')[0].appendChild(winBody);
}

The above function might look overly complicated, but it’s actually fairly simple. In order to understand it better, let’s dissect its code into simpler pieces and see how they work. The first fragment of code calls up the “DOMDiv()” function, in order to create the general containing DIV, which will hold the box corresponding to the window’s title bar, as well as the DIV element used as the window’s content area.

Once this general container, which I called “winbody”, has been created, it’s properly styled by applying to it a 2px border and specifying the shape of the mouse cursor as well. The next task the function performs is creating the window’s title bar, by using a similar method to the one used to build the general containing DIV. In this case, in order to get a beveled border, the title bar is absolutely positioned by specifying a left-top offset of 4px from the position of the general containing DIV, and it’s also appropriately styled.

Finally, the function creates the DIV that composes the window’s content area, by following the same sequence of steps performed for building up the previous DIVs, and finally inserts these elements into the structure of the web document.

Of course, a picture is worth a thousand words, so below I’ve included a screenshot that illustrates quite accurately the final look of the DOM-based window. Take a look:

Definitely you’ll agree that the look and feel of the window-like DIVs have been considerably improved, taking into account that the above structure has been constructed with no background images at all. It’s only three nested DIVs and pure presentational JavaScript code.

At this stage, I think I have enough building blocks to actually start turning DOM-based DIVs into drag-and-drop elements. Bearing this in mind, let’s leap forward and see how this task is carried out. Trust me, it’s not difficult at all.


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-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials