<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
/**
* 拖拽的流程
* 1. 鼠标按下时 开始拖 onmousedown
* 2. 当鼠标移动时间，被拖拽元素 随鼠标一起移动 onmousemove
* 3. 当鼠标松开时，被拖拽的元素固定在当前位置 onmouseup
*/
var div1 = document.getElementById("div1");
div1.onmousedown = function(event) {
event = event || window.event;
//计算鼠标和原图之间的位置
var moveX = event.clientX - div1.offsetLeft;
var moveY = event.clientY - div1.offsetTop;
document.onmousemove = function(e) {
e = e || window.event;
var x = e.clientX - moveX;
var Y = e.clientY - moveY;
div1.style.left = x + "px";
div1.style.top = Y + "px";
}
}
document.onmouseup = function() {
document.onmousemove = null;
//目的是为了让鼠标松开事件变成一次性
div1.onmouseup = null;
}
}
</script>
</head>
<body>
<div id="div1" style="background-color: aqua;width: 100px; height: 100px; position: absolute;"></div>
<div id="div1"
style="background-color:red; left: 200px;top:200px; width: 100px; height: 100px; position: absolute;"></div>
</body>
</html>
扫一扫
2224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
