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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>DRAG-AND-DROP DIV EXAMPLE</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 functions
function initDiv(){
var div1=xGetElementById('div1');
if(!div1){return};
xMoveTo(div1,50,50);
xEnableDrag(div1,divOnDragStart,divOnDrag,divOnDragStop);
xShow(div1);
}
// initialize properties for 'div1' element
function divOnDragStart(obj){
obj.offsetX=0;
obj.offsetY=0;
}
// move 'div1' element
function divOnDrag(obj,mdx,mdy){
xMoveTo(obj,xLeft(obj)+mdx,xTop(obj)+mdy);
obj.offsetX+=mdx;
obj.offsetY+=mdy;
}
// display x-y offset when dragging process is done
function divOnDragStop(obj){
  alert('Total X offset:'+obj.offsetX+' Total Y offset:'+obj.offsetY);
}
// turn DIV into 'dragging' element when page is loaded
window.onload=function(){
// check if browser is DOM compatible
if(document.createElement&&document.
getElementById&&document.getElementsByTagName){
  // initialize 'dragging' DIV elements
  initDiv();
}
}
</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;
}
</style>
</head>
<body>
<div id="div1" class="winbody">
<div class="titlebar">Sample dragging Div element</div>
<div>
</body>
</html>

At this point, hopefully you have grasped the logic for creating dragging DIVs, which you can eventually use for building web-based interfaces that look very similar to desktop applications. Of course, as each approach relies on JavaScript for doing its business, you should carefully balance the pros and cons, and consequently decide the best strategy for meeting your particular needs.

At this stage, after having illustrated in a step-by-step format the process for using the powerful X library as the workhorse for building a single “drag-and-drop” DIV element, I’ll show you the last example of this tutorial, which uses multiple dragging DIVs on the same web page. Tired of reading? Don’t be. We’re almost done.

Next: Going one step further: setting up multiple dragging DIVs >>