<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
onload = function(){
var oBox = document.getElementById("box");
//onmousedown： 鼠标按下
oBox.onmousedown = function(e){
var evt = e || event;
//evt.offsetX
var disX = evt.pageX - oBox.offsetLeft;
var disY = evt.pageY - oBox.offsetTop;
//onmousemove: 鼠标移动
document.onmousemove = function(e){
//console.log("move");
var evt = e || event;
oBox.style.left = evt.pageX - disX + "px";
oBox.style.top = evt.pageY - disY + "px";
}
//onmouseup: 鼠标松开
document.onmouseup = function(){
document.onmousemove = null; //取消move事件
document.onmouseup = null;
}
}
}
</script>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; background: green; position: absolute;left: 50px; top: 50px;"></div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
onload = function(){
var oBox = document.getElementById("box");
//onmousedown： 鼠标按下
oBox.onmousedown = function(e){
var evt = e || event;
//evt.offsetX
var disX = evt.pageX - oBox.offsetLeft;
var disY = evt.pageY - oBox.offsetTop;
//onmousemove: 鼠标移动
document.onmousemove = function(e){
//console.log("move");
var evt = e || event;
oBox.style.left = evt.pageX - disX + "px";
oBox.style.top = evt.pageY - disY + "px";
}
//onmouseup: 鼠标松开
document.onmouseup = function(){
document.onmousemove = null; //取消move事件
document.onmouseup = null;
}
}
}
</script>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; background: green; position: absolute;left: 50px; top: 50px;"></div>
</body>
</html>
1350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
