通过简单的鼠标事件,获取实时的鼠标坐标,和实时的div坐标,实现鼠标对div的拖曳效果。
注意事项:
1.event监听事件:有同步性,信息的一种及时交互。
2.获取鼠标实时坐标的三种方法:clientX,screenX,pageX.
3.获取div坐标
dx = move_div.offsetLeft;
dy = move_div.offsetTop;
一点心得:
在做程序的时候,先统计好预计要得到的效果,然后根据需要达成的效果,一个一个的完成。
简而言之就是,你要划分好步奏,一个一个来。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
padding: 0;
}
div{
position: absolute;
top: 200px;/*div的y轴*/
left: 150px;/*div的x轴*/
width: 300px;
height: 200px;
background-color: gray;
}
div:hover{
cursor: move;
}
</style>
<script>
/*
* 分析:
* 获取鼠标实时移动的坐标;m_move_x,m_move_y
* 鼠标按下时的坐标;m_down_x,m_down_y
* div的坐标;dx,dy
* 鼠标按下时,鼠标与div的偏移量;md_x,md_y
* div的新坐标;ndx,ndy
*/
var isDown = false;//记录鼠标状态
var move_div ;//要操作的div对象
var m_move_x,m_move_y,m_down_x,m_down_y,dx,dy,md_x,md_y,ndx,ndy;
//鼠标按下
function down(){
move_div = document.getElementById("move_div");
isDown = true;
//获取鼠标按下时坐标
m_down_x = event.pageX;
m_down_y = event.pageY;
//获取div坐标
dx = move_div.offsetLeft;
dy = move_div.offsetTop;
//获取鼠标与div偏移量
md_x = m_down_x - dx;
md_y = m_down_y - dy;
}
//鼠标移动
function move(){
move_div = document.getElementById("move_div");
//实时更新div的坐标
dx = move_div.offsetLeft;
dy = move_div.offsetTop;
//获取鼠标移动实时坐标
m_move_x = event.pageX;
m_move_y = event.pageY;
//鼠标按下时移动才触发
if(isDown){
//获取新div坐标,鼠标实时坐标 - 鼠标与div的偏移量
ndx = m_move_x - md_x;
ndy = m_move_y - md_y;
//把新div坐标值赋给div对象
move_div.style.left = ndx+"px";
move_div.style.top = ndy+"px";
}
}
//鼠标释放
function up(){
isDown = false;
}
</script>
</head>
<body>
<div id="move_div" onmousedown="down()" onmouseup="up()" onmousemove="move()"></div>
</body>
</html>
以上是老师版,以下是个人版。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
margin: 0;
padding: 0;
}
div{
border: 1px solid #000000;
width: 300px;
height: 300px;
position: absolute;
}
div:hover{
cursor: move;
}
</style>
<script>
//变量声明
//鼠标按下时的坐标
//鼠标移动时的坐标
//div的实时坐标
//div的最终坐标
//div与鼠标按下时坐标的偏移量
var isDown=false;
var move_div;//操控的div对象
var mouse_down_x,mouse_down_y,mouse_move_y,mouse_move_x,div_x,div_y,new_div_x,new_div_y,mouse_div_x,mouse_div_y;
//鼠标按下
function d(){
isDown=true;
//鼠标按下时的坐标
mouse_down_x=event.clientX;
mouse_down_y=event.clientY;
//div的实时坐标
move_div=document.getElementById("move_div");
div_x=move_div.offsetLeft;
div_y=move_div.offsetTop;
//div与鼠标按下时坐标的偏移量
mouse_div_x=mouse_down_x-div_x;
mouse_div_y=mouse_down_y-div_y
}
//鼠标移动
function m(){
//鼠标移动时的坐标
mouse_move_x=event.clientX;
mouse_move_y=event.clientY;
//div的实时坐标
move_div=document.getElementById("move_div");
div_x=move_div.offsetLeft;
div_y=move_div.offsetTop;
if(isDown){
//div的最终坐标
new_div_x=mouse_move_x-mouse_div_x;
new_div_y=mouse_move_y-mouse_div_y;
move_div.style.top=new_div_y+"px";
move_div.style.left=new_div_x+"px";
}
}
//鼠标释放
function u(){
isDown=false;
}
</script>
</head>
<body>
<div id="move_div" onmousedown="d()" onmousemove="m()" onmouseup="u()">
</div>
</body>
</html>