This tutorial will explain you how to make a draggable div. There are quite some tutorials on the web that explain this
but I've found that most of them are overly complicated and some of them don't even drag the div on all browsers.
The code bellow works on IE, Firefox and Opera.
First copy and paste the code and test it so you can see it working. You can also check the
online demo. This will create a draggable div on your test page.
When you click the header you will begin dragging the div. When you click the header again, the dragging will stop.
Bellow I'll explain each part of the code.
<HTML>
<HEAD>
<TITLE>Draggable Div </TITLE>
<style type="text/css">
#mydiv{
z-index:10;
background: #3366aa;
color:#ffffff;
width: 200px;
height: 200px;
position: absolute;
top: 50px;
left: 50px;
}
#divhead{
color:#000000;
background:#cccccc;
}
</style>
<script language="javascript">
var drag=0;
var xdif=0;
var ydif=0;
var initx="50px";
var inity="50px";
function begindrag(event){
if(drag==0){
floatingd = document.getElementById("mydiv");
if(floatingd.style.left==""){
floatingd.style.left=initx;
}
if(floatingd.style.top==""){
floatingd.style.top=inity;
}
prex=floatingd.style.left.replace(/px/,"");
prey=floatingd.style.top.replace(/px/,"");
drag=1;
xdif=event.clientX-prex;
ydif=event.clientY-prey;
}else{
drag=0;
}
}
function mousepos(event){
floatingd = document.getElementById("mydiv");
if(drag==1){
floatingd.style.left = event.clientX-xdif+"px";
floatingd.style.top = event.clientY-ydif+"px";;
}
}
</script>
</HEAD>
<BODY onMouseMove="mousepos(event)" >
<div id='mydiv'>
<div id='divhead' onclick="begindrag(event)">Header </div>
Hello, I'm a floating div!!!
</div>
This is jus some sample text.
<br><br><br><br><br><br><br><br><br><br><br>
This is jus some sample text.
</BODY>
</HTML>
The style part is just to give some colors to the div we'll be dragging.
On the html part we assign a onMouseMove event to the body, so any time the mouse move the mousepos function will be executed.
At the bottom we make 2 divs, one inside the other. To the div with id divhead(the Header part), we
assign an onclick event. The onclick event will call the begindrag function, with the event parameter.
Let's check now our javascript section. First we declare the variables that we'll be using on our functions. The
initx and inity variables are the initial values that you assign your div in the style section.
Next we have the begindrag function. Let's explain this part thoroughly
if(drag==0){
This checks if the the drag have being initiated, if not(that means if drag==0) then it will begin dragging. If it was already dragging
it will set the drag to 0 to stop the drag.
floatingd = document.getElementById("mydiv");
here we assign the mydiv div(the one we want to drag) to the floatingd variable.
if(floatingd.style.left==""){<br>
floatingd.style.left=initx; <br>
}
We make 2 checks if the current left position of the div is empty, then we set it to the initial value. Same for the top
position. We have to make it this way because even though you assigned the div the position in the style section, the
javascript section doesn't have that data available.
prex=floatingd.style.left.replace(/px/,"");
prey=floatingd.style.top.replace(/px/,"");
The floatingd.style.left value is "50px", to use this value in a mathematical operation we have to remove the px, so we remove it here. Same for
the top.
drag=1;
We assign the drag variable the value of 1. When it's 1 the mousepos function will run.
xdif=event.clientX-prex;
ydif=event.clientY-prey;
Here we detect the position of the mouse when the header was clicked, relative to the header of the div. We make this to conserve the relative position
while we move the div. The event.clientX is the x position of the mouse, passed to the function using the event parameter.
Now lets see the mousepos function. This function is called by the body every time the mouse is moved.
if(drag==1){
Here we check if the current value of the drag variable is 1, is so it means that we are moving the div right now.
floatingd.style.left = event.clientX-xdif+"px";
floatingd.style.top = event.clientY-ydif+"px";
Here we assign the div the new values. event.clientX is the current x position of the mouse. xdif is the position position
of the mouse relative to the header, that we calculated in the begindrag function. Finally we add the "px" to
make it work well. Without the px the script has problems on some browsers.
So this is a simple way of making a drag and drop div box. Happy coding.
| 
