JavaScript中随着鼠标拖拽而移动的块

最新推荐文章于 2019-08-15 10:47:40 发布

weixin_30851867

最新推荐文章于 2019-08-15 10:47:40 发布

阅读量146

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/believerp/p/6875344.html

版权

这里要设置一个div块，你按住它拖拽，它会随着你的鼠标走，比如常见的登录框。

给这个div设置简单的样式：

由于div是要跟着鼠标活动的，所以必须把position设置为绝对定位，也就是位置可以改变才行：

HTML部分：

<body>
<div id="div1">被拖拽的块</div>
</body>

对这个div进行操作：

由于按下鼠标点在div的那一刻，它里面的某一点的位置与div的距离就是恒定的，才能拖拽。所以，我们可以先求出这个点距离div的两边的距离disX和disY。

var disX=0;//鼠标距离div的边的横向距离
var disY=0;//鼠标距离div的边的纵向距离

div移动后：

div的位置变成了鼠标点的位置与点距离div的边距的差值

也就是left为oEvent.clientX-disX，

top为oEvent.clientY-disY；

设置变量存储div的坐标：

var l=oEvent.clientX-disX;//div的左坐标
var t=oEvent.clientY-disY;//右坐标

当鼠标要把这个div拖拽出可视区之时，我们要阻止：

左侧要拖拽出去时，也就是div的左边距要<0了，设置这左边距为0，就不能跑出左侧了。

上边要出去时，也就是div的top要<0了，设置这上边距为0，就不能跑出上侧了。

右侧要出去时，也就是div的左边距要大于可视区的宽度与div宽度的差了，那设置两者相等，就无法超出范围了；超出下端也是同理。

//div要拖出可视区左侧时：
if(l<0)
{
l=0;
}
//div要拖出可视区右侧时：
//document.documentElement.clientWidth 可视区的宽度
else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
{
l=document.documentElement.clientWidth-oDiv.offsetWidth;
}
//div要拖出可视区上边时：
if(t<0)
{
t=0;
}
//div要拖出可视区下边时：
if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
{
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}