Home arrow JavaScript arrow Page 4 - 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 - Turning DOM-based DIVS into dragging elements: using the X library
(Page 4 of 5 )

You may remember that in the previous tutorial I used the functionality of Michael Foster’s X library, for quickly creating dragging DIVs. Don’t worry if this doesn’t ring any bells for you. It’s something that I glossed over when I first explained the advantages of utilizing this powerful package. In the simplest sense, this library allowed me turning regular DIVs into true dragging elements, with only a few simple JavaScript functions. This came in handy for my purposes, since I didn’t have to deal directly with complex cross-browser DHTML routines.

It’s precisely for that reason that I’ll use this package for converting the brand new DOM-based DIVs into dragging boxes. Here’s an example of how you can create these kind of elements:

<script type="text/javascript" src="path-to-
<script type="text/javascript" src=" path-to-
<script type="text/javascript" src=" path-to-
<script type="text/javascript">
// DOMDiv() & DOMWindow() functions go here
function initDomDiv(){
 var domdiv=xGetElementById('domdiv');
function domdivOnDragStart(){}
// move 'domdiv' element
function domdivOnDrag(ele,mdx,mdy){
// display dragging div when page is loaded
  // display 'domdiv'
     domWin=new DOMWindow(100,100,250,200,'Drag-and-drop DOM
Div','This dragging DIV element has been created with the DOM.');
  // turn 'domdiv' into a dragging element

As shown above, first I’ve included the corresponding source files “x_core.js”, “x_events.js” and “x_drag.js” from the X library, required to perform the dragging process on the DOM-based DIV element, and finally defined the relevant “initDomDiv()”,”domdivOnDragStart()” and “domdivOnDrag()” functions, which are responsible for moving the DIV around the web page whenever the mouse is dragged on it.

Also, as you can appreciate, the “domdivOnDragStart()” function is in fact doing nothing (its definition is empty), because I haven’t specified a particular task to be performed at the start of the dragging process. You may want to change this and define this function to have it do something more useful.

Finally, after the page has been loaded, the script above creates a new DOM-based DIV element, and executes the “initDomDiv()” function, which, as you know, turns this element into a drag-and-drop box.

So far, the script that you just saw is now capable of building a window-like DIV, which is also a dragging element. I think this structure might be something really useful to use on web-based interfaces, aimed at emulating the behavior of desktop applications. Quite good, right?

Now that you know how to create dragging DIV elements to be included in your web pages, in the last section of this tutorial, I’ll show you the complete source code for the dragging DIV script, so you can copy it and use it in your own JavaScript applications.

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