HTML代碼
<html>
<head>
<meta charset="utf-8" />
<title>Dragtest</title>
<style type="text/css">
body
{
background-color: rgb(0,0,0);
background-size: cover;
}
</style>
</head>
<body>
<div style="width: 100%;height: 100%;
position: relative;">
<div id="divs" style="width: 100px;height: 100px;
background-color: #787878;position: absolute;"
onmouseover="this.style.backgroundColor='#DCDCDC'"
onmouseout="this.style.backgroundColor='#787878',setTimeout('mouup()',100)"
onmousedown="moudown(document.getElementById(this.id),event)"
onmouseup="mouup()"
onmousemove="boxmove(document.getElementById(this.id),event)"
align="center">
</div>
</div>
<script src="js/move.js"></script>
</body>
</html>JS代碼
var e;
var event;
var movestart=1;//bool
var ifmove=0;
var chaxy={x:0,y:0};
function getxy(event)
{
e= event||window.event;
var Point={x:0,y:0};
Point.x=e.clientX;
Point.y=e.clientY;
/*document.write(Point.x);*/
return Point;
}
function boxmove(box,event)
{
if(ifmove)
{
var mouxy=getxy(event);
if(movestart)
{
chaxy.x=mouxy.x-box.offsetLeft;
chaxy.y=mouxy.y-box.offsetTop;
movestart=0;
}
else
{
var nowxy={x:0,y:0};
nowxy.x=mouxy.x-chaxy.x;
nowxy.y=mouxy.y-chaxy.y;
box.style.left=nowxy.x+'px';
box.style.top=nowxy.y+'px';
}
}
/*if(ifmove)
{
move=setTimeout(function(){
boxmove(box,event);
},10)
}*/
}
function moudown(box,event)
{
ifmove=1;
boxmove(box,event);
}
function mouup()
{
ifmove=0;
movestart=1;
}
BUG：拖拽速度過快會停止
目標改進：拖拽無延遲
筆記：window對象參數要從網頁函數層層導入 不會隨內部函數調用來進行
--------------------------------------------------------------------------------------------------------------------2015.11.30
添加事件IE6/7/8只支持window.event不支持參數傳入，
Firefox只支持參數傳入不支持其它方式。
IE9/Opera/Safari/Chrome 兩種方式都支持。