在限制范围内拖拽div+吸附+事件捕获

腥腻
腥腻 发布于 2017-01-06 15:42:56 浏览:260 类型:原创 - 随笔 分类:JavaScript - 随笔 二维码: 作者原创 版权保护
直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>限制范围内拖拽</title>
<style>
*
{
margin: 0;
padding: 0;
}
#div1
{
width: 500px;
height: 500px;
background: #CCC;
position: relative;
}
#div2
{
width: 100px;
height: 100px;
background: green;
position: absolute;
left: 0;
top: 0;
}
</style>
<script>
window.onload = function()
{
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');

var disX,disY;
/*--------------开始拖拽div2-----------------*/
oDiv2.onmousedown = function(evt) //oDiv2.onmousedown表示按下这个对象,, document.onmouseup整个文档对象(这里把div改成document是防止弄丢div)
{
var oEvent = evt || window.event; //evt兼容FF/Chrome

disX = oEvent.clientX - oDiv2.offsetLeft; //-oDiv2.offsetLeft的距离是为了减去div与视口边框的距离
disY = oEvent.clientY - oDiv2.offsetTop;

if(oDiv2.setCapture) //IE
{
document.onmousemove = moveFn;
document.onmouseup = upFn;

oDiv2.setCapture(); //事件捕获后,所有事件都集中到这个div

return false; //FF、Chrome、IE9
}else //FF、chrome
{
document.onmousemove = moveFn; //!!!!根源所在,在优化版1中,设置为oDiv2.onmousemove时拖拽一次后无法再拖拽
document.onmouseup = upFn;
}

function moveFn(evt) //把document重新改为div,利用setCapture事件捕获,把事件都集中在一个物体上
{
var oEvent = evt || window.event;
var l = oEvent.clientX - disX; //计算鼠标移过的距离
var t = oEvent.clientY - disY;

var l1= oDiv1.offsetWidth - oDiv2.offsetWidth; //限制小div在大div中拖拽,计算能拖拽的max距离
var t1 = oDiv1.offsetHeight - oDiv2.offsetHeight;
if(l > l1-50)
{
l = l1;
}
if(l < 50)
{
l = 0;
}
if(t > t1-50)
{
t = t1;
}
if(t < 50)
{
t = 0;
}

oDiv2.style.left = l +'px';
oDiv2.style.top = t +'px';
}

function upFn()
{
this.onmousedown = null;
this.onmousemove = null;

if(oDiv2.releaseCapture) //如果事件捕获存在,则释放事件捕获
{
oDiv2.releaseCapture();
}
}

return false; //阻止浏览器默认事件
};
};
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2">拖拽</div>
</body>
</html>
z
给个赞 1 人点赞
收藏 3 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
腥腻 腥腻 作者

作者最新