мой варик:
<html>
<head>
<style type="text/css">
div
{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
cursor: pointer;
}
</style>
</head>
<body>
<div id="div" style="left: 0px; top: 0px;"></div>
<script type="text/javascript">
var div = document.getElementById('div');
var x, y;
function mousePageXY(e)
{
var x = 0, y = 0;
if (!e) e = window.event;
if (e.pageX || e.pageY)
{
x = e.pageX;
y = e.pageY;
}
else
if (e.clientX || e.clientY)
{
x=e.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft)-document.documentElement.clientLeft;
y=e.clientY+(document.documentElement.scrollTop||document.body.scrollTop)-document.documentElement.clientTop;
}
return {"x":x, "y":y};
}
var move = function(e)
{
var k = mousePageXY(e);
div.style.left = -x + k.x + 'px';
div.style.top = -y + k.y + 'px';
//console.log(k);
}
div.onmousedown = function(e)
{
var k = mousePageXY(e);
x = k.x - parseInt(this.style.left);
y = k.y - parseInt(this.style.top);
document.onmousemove = move;
//console.log(k);
}
document.onmouseup = function(e)
{
document.onmousemove = undefined;
}
</script>
</body>
</html>