Building `Drag-and-Drop` DIVs: An Advanced Approach - Getting the dragging script completed: adding some CSS rules and (X)HTML markup
(Page 3 of 4 )
As I said before, in order to see how the full dragging script works, here is its complete definition, including some basic CSS declarations, together with the corresponding (X)HTML markup:
<!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 >>
More JavaScript Articles
More By Alejandro Gervasio
