JS 實現div元素的拖動
功能描述：
在瀏覽器窗口有一個div盒子，用鼠標點擊盒子，按下進行拖動，當鼠標彈起時，該div就移動到此位置了。
實現代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.div1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
</style>
<script>
//全局變量，標記是否鼠標按下
var isMouseDown=false;
//全局div
var div;
var leftX=0;
var topY=0;
window.onload=function(){
//增加鼠標按下事件
div=document.getElementById("div1");
div.onmousedown=mouseDownAction;
document.onmousemove=mouseMoveAction;
div.onmouseup=mouseUpAction;
}
/**
*鼠標按下
*/
function mouseDownAction(e){
isMouseDown=true;
//記錄下鼠標點擊的時候的位置
leftX= e.offsetX;
topY= e.offsetY;
}
/**
*鼠標移動
*/
function mouseMoveAction(e){
if(isMouseDown){
div.style.left= e.pageX-leftX+"px";
div.style.top= e.pageY-topY+"px";
}
}
/**
*鼠標彈起來
*/
function mouseUpAction(e){
isMouseDown=false;
}
</script>
</head>
<body>
<div class="div1" id="div1"></div>
</body>
</html>