拖拽的流程
- 当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown
- 当鼠标移动时,被拖拽元素跟随移动 onmousemove
- 当鼠标松开时,被拖拽元素被固定 onmouseup
对div或者图片的拖拽
<div id="box1"></div>
<div id="box2"></div>
<img src="img/狐狸.jpg" id="img1" style="position: absolute;"/>
要使用户点击图片的位置和拖拽时鼠标的位置一致,要设置div的偏移量
鼠标.clientX-元素.offsetLeft
鼠标.clientY-元素.offsetTop
var ol=event.clientX-box1.offsetLeft;
var ot=event.clientY-box1.offsetTop;
提取一个专门用来拖拽的函数
function drag(obj){
obj.onmousedown=function(event){
//求div的偏移量 鼠标.clientX-元素.offsetLeft
//求div的偏移量 鼠标.clientY-元素.offsetTop
var ol=event.clientX-obj.offsetLeft;
var ot=event.clientY-obj.offsetTop;
//为document绑定鼠标跟随事件
document.onmousemove=function(event){
//获取鼠标坐标
var left=event.clientX-ol;
var top=event.clientY-ot;
//修改box1的位置
obj.style.left=left+"px";
obj.style.top=top+"px";
};
//为document绑定鼠标松开事件
//不能给box1绑定
document.onmouseup=function(){
//取消document.onmousedown事件
document.onmousemove=false;
document.onmouseup=false;//也要取消
};
};
}
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style type="text/css">
#box1{
width: 80px;
height: 80px;
background-color: greenyellow;
position: absolute;
}
#box2{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 100px;
top: 100px;
}
img{
width: 100px;
height: 200px;
left: 300px;
top: 200px;
}
</style>
<script type="text/javascript">
window.onload=function(){
/*
* 拖拽box1的流程
* 1.当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown
* 2.当鼠标移动时,被拖拽元素跟随移动 onmousemove
* 3.当鼠标松开时,被拖拽元素被固定 onmouseup
*/
var box1=document.getElementById("box1");
var box2=document.getElementById("box2");
var img1=document.getElementById("img1")
//开启拖拽
drag(box1);
drag(box2);
drag(img1);
//为box1绑定鼠标按下事件
box1.onmousedown=function(event){
//求div的偏移量 鼠标.clientX-元素.offsetLeft
//求div的偏移量 鼠标.clientY-元素.offsetTop
var ol=event.clientX-box1.offsetLeft;
var ot=event.clientY-box1.offsetTop;
//为document绑定鼠标跟随事件
document.onmousemove=function(event){
//获取鼠标坐标
var left=event.clientX-ol;
var top=event.clientY-ot;
//修改box1的位置
box1.style.left=left+"px";
box1.style.top=top+"px";
};
//为document绑定鼠标松开事件
//不能给box1绑定
document.onmouseup=function(){
//取消document.onmousedown事件
document.onmousemove=false;
document.onmouseup=false;//也要取消
};
};
};
/*
* 提取一个专门用来拖拽的函数
*/
function drag(obj){
obj.onmousedown=function(event){
//求div的偏移量 鼠标.clientX-元素.offsetLeft
//求div的偏移量 鼠标.clientY-元素.offsetTop
var ol=event.clientX-obj.offsetLeft;
var ot=event.clientY-obj.offsetTop;
//为document绑定鼠标跟随事件
document.onmousemove=function(event){
//获取鼠标坐标
var left=event.clientX-ol;
var top=event.clientY-ot;
//修改box1的位置
obj.style.left=left+"px";
obj.style.top=top+"px";
};
//为document绑定鼠标松开事件
//不能给box1绑定
document.onmouseup=function(){
//取消document.onmousedown事件
document.onmousemove=false;
document.onmouseup=false;//也要取消
};
};
}
</script>
</head>
<body>
<div id="box1">
</div>
<div id="box2">
</div>
<img src="img/狐狸.jpg" id="img1" style="position: absolute;"/>
</body>
</html>