鼠標拖拽實例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
padding: 0;
}
div{
position: absolute;
top: 200px;/*div的y軸*/
left: 150px;/*div的x軸*/
width: 300px;
height: 200px;
background-color: gray;
}
div:hover{
cursor: move;
}
</style>
<script>
/*
* 分析：
* 獲取鼠標實時移動的座標；m_move_x,m_move_y
* 鼠標按下時的座標；m_down_x,m_down_y
* div的座標；dx,dy
* 鼠標按下時，鼠標與div的偏移量；md_x,md_y
* div的新座標；ndx,ndy
*/
var isDown = false;//記錄鼠標狀態
var move_div ;//要操作的div對象
var m_move_x,m_move_y,m_down_x,m_down_y,dx,dy,md_x,md_y,ndx,ndy;
//鼠標按下
function down(){
move_div = document.getElementById("move_div");
isDown = true;
//獲取鼠標按下時座標
m_down_x = event.pageX;
m_down_y = event.pageY;
//獲取div座標
dx = move_div.offsetLeft;
dy = move_div.offsetTop;
//獲取鼠標與div偏移量
md_x = m_down_x - dx;
md_y = m_down_y - dy;
}
//鼠標移動
function move(){
move_div = document.getElementById("move_div");
//實時更新div的座標
dx = move_div.offsetLeft;
dy = move_div.offsetTop;
//獲取鼠標移動實時座標
m_move_x = event.pageX;
m_move_y = event.pageY;
//鼠標按下時移動才觸發
if(isDown){
//獲取新div座標，鼠標實時座標 - 鼠標與div的偏移量
ndx = m_move_x - md_x;
ndy = m_move_y - md_y;
//把新div座標值賦給div對象
move_div.style.left = ndx+"px";
move_div.style.top = ndy+"px";
}
}
//鼠標釋放
function up(){
isDown = false;
}
</script>
</head>
<body>
<div id="move_div" onmousedown="down()" onmouseup="up()" onmousemove="move()"></div>
</body>
</html>