<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
#box2{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 200px;
top: 200px;
}
</style>
<script type="text/javascript">
window.onload=function()
{
/*
* 拖拽box1元素
* -拖拽的流程
* 1.当鼠标在拖拽元素上按下时，开始拖拽 onmousedown
* 2.当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
* 3.当鼠标松开时，被拖拽元素固定在当前位置onmouseup
*/
//获取box1
var box1 = document.getElementById("box1");
//为box1绑定一个鼠标按下事件
//当鼠标在拖拽元素上按下时，开始拖拽 onmousedown
box1.onmousedown = function() {
//为document绑定一个onmousemove事件
document.onmousemove = function(event){
event=event||winbow.event;
//当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
//获取鼠标的坐标
var left = event.clientX;
var top = event.clientY;
//修改box1的位置
box1.style.left = left+"px";
box1.style.top = top+"px";
};
//为单前元素绑定一个 鼠标松开事件
document.onmouseup = function(){
//当鼠标松开时，被拖拽元素固定在当前位置onmouseup
//取消document的onmousemove事件
document.onmousemove = null;
//取消document的onmouseup事件
document.onmouseup = null;
};
};
};
</script>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
413
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
