Home > Javascript > Dragable Div

Dragable Div


<html>
<head>
<title>BASIC DRAG-AND-DROP DIVS</title>
<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>

<table border=”45″ cellpadding=”12″ cellsacing=”12″>

<tr ><td>djfdskjf</td><td >djfdskjf</td></tr>

<tr class=”draggable”><td >djfdskjf</td><td >djfdskjf</td></tr>

<tr><td class=”draggable”>djfdskjf</td><td >djfdskjf</td></tr>
<tr><td class=”draggable”>djfdskjf</td><td >djfdskjf</td></tr>
</body>
</html>

Advertisements
Categories: Javascript
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: