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

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-
library/x_core.js"></script>
<script type="text/javascript" src=" path-to-
library/x_event.js"></script>
<script type="text/javascript" src=" path-to-
library/x_drag.js"></script>
<script type="text/javascript">
// DOMDiv() & DOMWindow() functions go here
function initDomDiv(){
 var domdiv=xGetElementById('domdiv');
   xMoveTo(domdiv,100,100);
   xEnableDrag(domdiv,domdivOnDragStart,domdivOnDrag);
   xShow(domdiv);
}
function domdivOnDragStart(){}
// move 'domdiv' element
function domdivOnDrag(ele,mdx,mdy){
   xMoveTo(ele,xLeft(ele)+mdx,xTop(ele)+mdy);
}
// display dragging div when page is loaded
window.onload=function(){
 if(document.createElement&&document.
getElementById&&document.getElementsByTagName){
  // 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
  initDomDiv();
 }
}

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.