Building `Drag-and-Drop` DIVs: Developing a Basic Script - Gluing the pieces together: defining the complete DIV dragging script
(Page 5 of 5 )
As I mentioned earlier, here is the complete DIV dragging script, along with some sample “drag-and-drop” DIVs:
<!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>
<div class="draggable">
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. |
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
