How to create draggable div

To create a draggable div .We have some basic knowledge about

  • HTML
  • CSS
  • Javascript

First create a div.The div act as an element using to drag on the screen. Div id is “dragger” use to refer in javascript.The content in between div tags are optional.you may also write ur own text.

<body><div id="dragger" class="dude">
Div  with class <b>dude</b>
<p>replace this text!</p>  </div></body>

We give it a class “dude” which define it’s attributes.

<head><style type="text/css">
.dude {
background: #FF0000;
width: 200px;
height: 200px;
position: absolute;
top: 50px;
left: 50px;
</style></head>

Secondly After making a div, now think about how to make it move.To move the division we need to know about the coordinates values of the screen.

Create one another division

<div id="co-ed">
X: <span  id="X-coord"></span><br>
Y: <span  id="Y-coord"></span>
</div>

This div use two spans which we will put the X and Y coordinates. Its attributes given in internal style manner.

.co-di{float:right;}

We use javascript to find the coordinate values of screen.

x=event.offsetX;
y=event.offsetY;
document.getElementById('X-coord').innerHTML = x  +'px';
document.getElementById('Y-coord').innerHTML = y  +'px';

All we do is set the innerHTML of the spans to be the variable and append the letters px by doing +’px’.

Now we use some event handler like onMouseMove event

<body onMouseMove="mouser(event)">

We put it in the <body> tag.Because whenever a mouse moves on the screen our function “mouser(event)” is called. We want to be able to move anywhere over the page and drag our object.An event is an argument that detect the mouse actions like the mouse click.
Now lets define our mouser(event) function’s code.
It should be in <script> tag under the <head> tag

<script language="javascript">
var x;
var y;
function mouser(event){if(event.offsetX || event.offsetY) {
x=event.offsetX;
y=event.offsetY; }
document.getElementById('X-coord').innerHTML = x  +'px';
document.getElementById('Y-coord').innerHTML = y  +'px';}
</script>

First of course <script language=”javascript”>.Some global variables x and y to used to hold the value of the coordinates. event.offsetX; event is mouse happening action and offsetX is the just the X position relative to the screen of the cursor. Y is the same.By doing this we only just track the cursor positions.

Now to make the division draggableTo drag a div we use event handler(s)
onMouseDown(); //press down
onMouseMove(); //move
onMouseUp(); //release
There are two states of div. One is dynamic means being dragged and one is static where it is not being dragged.To track the state of div we will use two variable.
Add this to your javascript.

var being_dragged = false;
var element;
if(being_dragged == true) {
document.getElementById(element).style.top = y +'px'; document.getElementById(element).style.left = x +'px';}

if(being_dragged == true).This execute the move code, else it will do nothing.It set the top and left value of the element to the cursor position.when you mouse down, the state is true, and when you mouse up the state is false.

Now let’s create our final div, adding all the event handlers.

<div id="dragger" class="dude"  onMouseDown="mouse_down(event,'dragger')" onMouseUp="mouse_up()">
Div with class <b>dude</b>
<p>replace this text!</p>
</div>

We create our div and assign it a class and id. We setup our event handlers for onMouseDown and onMouseUp. These functions we will define next (remember these go in the <head></head> tags).

First mouse_down() function.

function mouse_down(event, ele_name) {
being_dragged = true;
element = ele_name;
document.getElementById(element).style.cursor = 'move';}

 

This function is performed after pressing down on the div, it sets our state to true. So we are now being_dragged. It also sets the element to the ele_name passed in which was ‘dragger’. So element = dragger, which is our current div. The last line give us the “move” cursor when moving an item.

Now the mouse_up() function.

function mouse_up() {
being_dragged = false;
document.getElementById(element).style.cursor = 'auto';
document.getElementById(element).style.top = y  +'px';
document.getElementById(element).style.left = x +'px';}

This function takes no arguments.The first line resets the state. The 2nd line resets the cursor. Then the 3rd and 4th line set the positions. Because the top and left attributes are defined in the style tag.

THE CODE

<html>
<head>
<style>
.dude{
background-color:green;
width:200px;
height:100px;
position:relative;
color:white;
top:200;
left:200;
}
.co-di{
float:right;
}
</style>
<script language="javascript">
var x;
var y;
var element;
var being_dragged = false;
function mouser(event){
if(event.offsetX || event.offsetY){
x=event.offsetX;
y=event.offsetY;
}
document.getElementById('X-coord').innerHTML = x +'px';
document.getElementById('Y-coord').innerHTML = y +'px';
if(being_dragged == true) {
document.getElementById(element).style.left = x +'px';
document.getElementById(element).style.top = y +'px';
}}
function mouse_down(event, ele_name) {
being_dragged = true;
element = ele_name;
document.getElementById(element).style.cursor = 'move'; }
function mouse_up() {
being_dragged = false;
document.getElementById(element).style.cursor = 'auto';
document.getElementById(element).style.top = y +'px';
document.getElementById(element).style.left = x +'px';}
</script>
</head>
<body onMouseMove="mouser(event)">
<div id="dragger" onMouseDown="mouse_down(event, 'dragger')" onMouseUp="mouse_up()">
Div with class <b>dude</b>
<p>replace this text!</p>
</div>
<div>
X: <span id="X-coord"></span><br><br>
Y: <span id="Y-coord"></span>
</div>
</body>
</html>

Thankiew

5 thoughts on “How to create draggable div”

Leave a Reply

Your email address will not be published. Required fields are marked *