案例——拖拽
程序员文章站
2022-03-21 17:33:07
拖拽 ~~~javascript ~~~ ......
拖拽
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: skyblue;
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绑定一个鼠标按下事件
box1.onmousedown=function(event){
// div的偏移量 鼠标.clientx - 元素.offsetleft
// div的偏移量 鼠标.clenty -元素.offsettop
event = event || window.event;
var ol=event.clientx - box1.offsetleft;
var ot=event.clienty-box1.offsettop;
// 为document绑定一个onmousemove事件
document.onmousemove=function(event){
event = event || window.event;
// 当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
// 获取鼠标坐标？
var left =event.clientx - ol;
var top=event.clienty - ot;
// 修改box1的位置
box1.style.left=left+"px";
box1.style.top=top+"px";
}
// 当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
document.onmouseup=function(){
// 取消document.onmousemove事件
document.onmousemove=null;
document.onmouseup=null;
alert(12);
}
};
/*
当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容
此事后导致拖拽功能的异常
如果不希望发生这个异常 return false
对ie8不起作用
*/
return false;
}
</script>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>