<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML XMLNS:ELEMENT>
<html>
<head>
<title>::drag::</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
body{
margin:0px;
background-color:#5f9fff;
overflow:hidden;
}
#center{
background-color:#efefef;
}
#ct_frame{
position:absolute;
top:0px;
left:0px;
}
</style>
</head>
<body>
<div id="center"></div>
</body>
</html>
<script type="text/javascript">
var ct = document.getElementById("center");
var oX = 0;
var oY = 0;
var dX = 0;
var dY = 0;
var eBut = -1;
var delay = 1;
(function(){
var x = document.body.clientWidth;
var y = document.body.clientHeight;
ct.style.position = "absolute";
ct.style.top = "0px";
ct.style.left = "0px";
ct.style.width = x + "px";
ct.style.height = y + "px";;
})();
window.onmousedown = function(event){
eBut = event.button;
if(eBut == 2){
oX = event.clientX;
oY = event.clientY;
} else {
return 0;
}
eButDown = true;
};
window.onmouseup = function() {
eBut = -1;
delay = 1;
//ct.style.top = "500px";
//ct.style.left = "500px";
var fx = ct.offsetLeft;
var fy = ct.offsetTop;
goBack(fx,fy);
};
window.onmousemove = function(event) {
if(eBut == 2){
dx = event.clientX - oX;
dy = event.clientY - oY;
ct.style.left = (0 + dx / delay) + "px";
ct.style.top = (0 + dy / delay) + "px";
delay += 0.2;
}
};
document.oncontextmenu = function(){
return false;
};
function goBack(x,y) {
var stepX = (0 - x) / 5;
var stepY = (0 - y) / 5;
var sx = new Array();
var sy = new Array();
var index = 0;
for(var i = 2;i >= -2;i--) {
sx[index] = stepX + (i * (stepX / 5));
sy[index] = stepY + (i * (stepX / 5));
index++;
}
var count = 0;
var timer = window.setInterval(function(){
ct.style.left = (ct.offsetLeft + sx[count]) + "px";
ct.style.top = (ct.offsetTop + sy[count]) + "px";
count++;
if(count >= 5){
ct.style.left = "0px";
ct.style.top = "0px";
window.clearInterval(timer);
}
},10);
}
</script>