JAVASCRIPT

Building `Drag-and-Drop` DIVs: Developing a Basic Script

Conventional pop-up windows in JavaScript applications may work for some things, but they can be annoying, and many people use pop-up blockers. There is an alternative: drag-and-drop DIV elements. In this article, Alejandro Gervasio gets you started with the basics.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 48

December 07, 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>BASIC DRAG-AND-DROP DIVS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript">
// start dragging
function startDrag(e){
// determine event object
if(!e){var e=window.event};
// determine target element
var targ=e.target?e.target:e.srcElement;
if(targ.className!='draggable'){return};
// calculate event X,Y coordinates
    offsetX=e.clientX;
    offsetY=e.clientY;
// assign default values for top and left properties
if(!targ.style.left){targ.style.left='0px'};
if(!targ.style.top){targ.style.top='0px'};
// calculate integer values for top and left properties
    coordX=parseInt(targ.style.left);
    coordY=parseInt(targ.style.top);
    drag=true;
// move div element
    document.onmousemove=dragDiv;
}
// continue dragging
function dragDiv(e){
if(!drag){return};
if(!e){var e=window.event};
var targ=e.target?e.target:e.srcElement;
// move div element
targ.style.left=coordX+e.clientX-offsetX+'px';
targ.style.top=coordY+e.clientY-offsetY+'px';
return false;
}
// stop dragging
function stopDrag(){
drag=false;
}
window.onload=function(){
document.onmousedown=startDrag;
document.onmouseup=stopDrag;
}
</script>
<style type="text/css">
.draggable {
position: relative;
width: 250px;
height: 200px;
background-color: #ccc;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="draggable">

This is a dragging DIV element

</div>

This is a dragging DIV element

</div>

</body>

</html>

If you wish to use the above script and tweak its code, you can either copy it or download the sample file from here (which is also available at the beginning of this article).

Bottom line

In this tutorial, I’ve provided you with a basic (yet functional) DIV dragging script, which can be easily included as part of your JavaScript applications. Of course, this is only a basic example, and it’s not intended to be used in production environments.

However, all isn’t lost. If you’re looking for a more robust and flexible method for building “drag-and-drop” DIVs, you’ll have to wait until the next article, where I’ll use a powerful, cross-browser library, in order to encapsulate most of the complexities involved in creating a DIV dragging JavaScript program. You won’t want to miss it!

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.