<!DOCTYPE html>
<html>
<head>
<script>
function dragElement(elmnt)
{
var pos1 = 0;
var pos2 = 0;
var pos3 = 0;
var pos4 = 0;
elmnt.onmousedown = dragMouseDown;
function dragMouseDown()
{
e = window.event;
e.preventDefault();//prevent evtl link
pos2 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag()
{
e = window.event;
e.preventDefault();//prevent evtl link
pos1 = pos2 - e.clientX;
pos2 = e.clientX;
elmnt.style.left = (elmnt.offsetLeft-pos1) + "px";;
pos3 = pos4 - e.clientY;;
pos4 = e.clientY;;
elmnt.style.top = (elmnt.offsetTop-pos3) + "px";;
}
function closeDragElement()
{
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
<style>
div#container{position:relative;}
div#draggable{position:relative; display:block; width:100px; height:100px; border:1px solid #aaa; color:#333; font-family:Verdana; font-size:13px; font-weight:bold; line-height:100px; text-align:center; background-color:#ddd; cursor:pointer;}
</style>
</head>
<body>
<div id="container">
<div id="draggable">
Drag me!
</div>
</div>
<script>
dragElement(document.getElementById("draggable"));
</script>
</body>
</html>