JS基础-事件的拖拽
程序员文章站
2022-03-04 22:16:04
...
1.事件的拖拽
拖拽的流程：1.当鼠标在被拖拽元素按下时，开始拖拽。（onmousedown）;2.当鼠标移动时被拖拽的元素随鼠标移动。(onmousemove);3.当鼠标松开时被拖拽元素固定在当前位置.(onmouseup)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>事件的拖拽练习</title>
<style type="text/css">
#box1
{
width:100px;
height:100px;
background-color:#0F0;
position:absolute;
}
</style>
<script type="text/javascript">
//拖拽的流程：1.当鼠标在被拖拽元素按下时，开始拖拽。2.当鼠标移动时被拖拽的元素随鼠标移动。3.当鼠标松开时被拖拽元素固定在当前位置
window.function()
{
//获取div
var b=document.getElementById("box1");
//绑定鼠标按下事件onmousedown
b.onmousedown=function(event)
{
//当调用一个元素的setCapture()方法以后，这个元素将会把下一次所有的鼠标按下相关的事件捕获到自己身上
//设置div捕获所有鼠标按下的事件（解决IE8兼容问题）
//setCapture()方法只有IE支持，但在火狐中调用时不会报错，而如果在Chrome调用会报错
if( b.setCapture)
{
b.setCapture();
}
event=event||window.event;
//求出div的偏移量，鼠标.clientX-元素.offsetLeft
//求div的偏移量，鼠标.clientY-元素.offsetTop
//求div偏移量的目的是为了在按下鼠标时使鼠标指针的位置固定不动
var ol=event.clientX-b.offsetLeft;
var ot=event.clientY-b.offsetTop;
//为document绑定一个onmousemove事件
document.onmousemove=function(event)
{
//鼠标按下开始拖拽,当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
event=event||window.event;
//获取鼠标坐标
var x=event.clientX-ol;
var y=event.clientY-ot;
b.style.left=x+"px";
b.style.top=y+"px";
};
//为document绑定一个鼠标松开事件
document.onmouseup=function()
{
//当鼠标松开时被拖拽元素固定在当前位置onmouseup
//取消onmousemove事件
document.onmousemove=null;
//取消document.onmouseup事件
document.onmouseup=null;
//取消对事件的捕获
if( b.releaseCapture)
{
b.releaseCapture();
}
};
//当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜素内容，此时会导致拖拽功能异常，这个是浏览器提供的默认行为，如果不希望发生这个行为，则可以通过return false来取消。但此方法对IE8不起作用
return false;
};
};
</script>
</head>
<body>
我是一段文字
<div id="box1">
</div>
</body>
</html>
2.自定义拖拽函数
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>事件的拖拽练习</title>
<style type="text/css">
#box1
{
width:100px;
height:100px;
background-color:#0F0;
position:absolute;
}
#box2
{
width:100px;
height:100px;
background-color:#F60;
position:absolute;
left:200px;
top:200px;
}
#box3
{
width:100px;
height:100px;
background-color:#F39;
position:absolute;
left:300px;
top:300px;
}
</style>
<script type="text/javascript">
//拖拽的流程：1.当鼠标在被拖拽元素按下时，开始拖拽。2.当鼠标移动时被拖拽的元素随鼠标移动。3.当鼠标松开时被拖拽元素固定在当前位置
window.function()
{
//获取div
var b1=document.getElementById("box1");
var b2=document.getElementById("box2");
var b3=document.getElementById("box3");
drag(b1);
drag(b2);
drag(b3);
};
//提取一个专门用来设置拖拽的函数,参数有obj，代表开启拖拽的元素
function drag(obj){
//绑定鼠标按下事件onmousedown
obj.onmousedown=function(event)
{
//当调用一个元素的setCapture()方法以后，这个元素将会把下一次所有的鼠标按下相关的事件捕获到自己身上
//设置div捕获所有鼠标按下的事件（解决IE8兼容问题）
//setCapture()方法只有IE支持，但在火狐中调用时不会报错，而如果在Chrome调用会报错
if( obj.setCapture)
{
obj.setCapture();
}
event=event||window.event;
//求出div的偏移量，鼠标.clientX-元素.offsetLeft
//求div的偏移量，鼠标.clientY-元素.offsetTop
//求div偏移量的目的是为了在按下鼠标时使鼠标指针的位置固定不动
var ol=event.clientX-obj.offsetLeft;
var ot=event.clientY-obj.offsetTop;
//为document绑定一个onmousemove事件
document.onmousemove=function(event)
{
//鼠标按下开始拖拽,当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
event=event||window.event;
//获取鼠标坐标
var x=event.clientX-ol;
var y=event.clientY-ot;
obj.style.left=x+"px";
obj.style.top=y+"px";
};
//为document绑定一个鼠标松开事件
document.onmouseup=function()
{
//当鼠标松开时被拖拽元素固定在当前位置onmouseup
//取消onmousemove事件
document.onmousemove=null;
//取消document.onmouseup事件
document.onmouseup=null;
//取消对事件的捕获
if( obj.releaseCapture)
{
obj.releaseCapture();
}
};
//当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜素内容，此时会导致拖拽功能异常，这个是浏览器提供的默认行为，如果不希望发生这个行为，则可以通过return false来取消。但此方法对IE8不起作用
return false;
};
}
</script>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>