JAVASCRIPT

Building `Drag-and-Drop` DIVs: An Advanced Approach

This is it, the article you were waiting for! Welcome to the second tutorial of the series “Building drag-and-drop DIVs.” In three parts, this series teaches you how to create realistic dragging DIVs, in order to boost the capabilities of web-based user interfaces, by introducing the “drag-and-drop” features found in many popular desktop applications.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 10

December 14, 2005

TABLE OF CONTENTS:

To extend the existing capabilities of the DIV dragging script that you saw earlier, I’ll simply set up a new example, which is capable of including several dragging DIVS on the same web page. Since the new script also uses the X library, you shouldn’t have any problems understanding how it works. Having said that, below is the complete source code for creating multiple dragging DIVs on the same web document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>MULTIPLE DRAG-AND-DROP DIVS</title>
<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">
// create 'div1' element and assign events
function initDiv1(){
var div1=xGetElementById('div1');
if(!div1){return};
xMoveTo(div1,50,50);
xEnableDrag(div1,div1OnDragStart,div1OnDrag);
xShow(div1);
}
// define 'div1OnDragStart()' function for 'div1' element
function div1OnDragStart(){}
// move 'div1' element
function div1OnDrag(obj,mdx,mdy){
xMoveTo(obj,xLeft(obj)+mdx,xTop(obj)+mdy);
}
// create 'div2' element and assign events
function initDiv2(){
var div2=xGetElementById('div2');
if(!div2){return};
xMoveTo(div2,250,250);
xEnableDrag(div2,div2OnDragStart,div2OnDrag);
xShow(div2);
}
// define 'div2OnDragStart()' function for 'div2' element
function div2OnDragStart(){}
// move 'div2' element
function div2OnDrag(obj,mdx,mdy){
xMoveTo(obj,xLeft(obj)+mdx,xTop(obj)+mdy);
}
// create 'div3' element and assign events
function initDiv3(){
var div3=xGetElementById('div3');
if(!div3){return};
xMoveTo(div3,450,50);
xEnableDrag(div3,div3OnDragStart,div3OnDrag);
xShow(div3);
}
// define 'div3OnDragStart()' function for 'div3' element
function div3OnDragStart(){}
// move 'div3' element
function div3OnDrag(obj,mdx,mdy){
xMoveTo(obj,xLeft(obj)+mdx,xTop(obj)+mdy);
}
// turn DIVS into 'dragging' elements when page is loaded
window.onload=function(){
// check if browser is DOM compatible
if(document.createElement&&document.
getElementById&&document.getElementsByTagName){
  // initialize 'dragging' DIV elements
  initDiv1();
  initDiv2();
  initDiv3();
}
}
</script>
<style type='text/css'>
.titlebar {
height: 15px;
background: #03c;
font: bold 11px Arial, Helvetica, sans-serif;;
color: #fff;
margin: 0;
padding: 1px;
overflow: hidden;
}
.winbody {
width: 200px;
height: 180px;
position: absolute;
background: #eee;
font: normal 11px Arial, Helvetica, sans-serif;
color: #000;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #000;
cursor: default;
}
p {
margin: 10px;
}
</style>
</head>
<body>
<div id="div1" class="winbody">
<div class="titlebar">Sample Dragging Div1</div>
<div>
<p>This is an example of a dragging DIV element.</p>
</div>
</div>
<div id="div2" class="winbody">
<div class="titlebar">Sample Dragging Div2</div>
<div>
<p>This is an example of a dragging DIV element.</p>
</div>
</div>
<div id="div3" class="winbody">
<div class="titlebar">Sample Dragging Div3</div>
<div>
<p>This is an example of a dragging DIV element.</p>
</div>
</div>
</body>
</html>

As you can see from the script above, I’ve simply used the same source files of the X library, in order to create three different dragging DIVs, and define the corresponding JavaScript functions, which are responsible for turning these elements into “drag-and-drop” boxes. Closely similar to what I illustrated in the first example, each DIV is first initialized by the “initDiv1()”, “initDiv2()” and “initDiv3()” functions, and then the pertinent callback functions are tied to each of them, in order to implement the already familiar dragging effect.

With reference to the CSS declarations and (X)HTML markup, it remains nearly the same as the previous example, so I won’t waste your time explaining the boring details. Of course, the major change rests on including the three DIV elements that I mentioned before on the web page, so they can be dragged around the web document. Pretty good, right?

Bottom line

That’s all for now. Throughout this second tutorial, I’ve demonstrated how you can easily create dragging DIV elements by utilizing the X library developed by Michael Foster. Personally, I strongly recommend using this powerful package for building cross-browser DHTML scripts, due to its high quality and outstanding capabilities. Finally, I’d like to thank Michael Foster, for providing web developers with this remarkable set of JavaScript libraries.

That said, in the last installment of this series, I’ll go through the details of building dragging DIVs, which look and feel like real windows. As usual, see you in the next part!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.