JavaScript | 事件案例之鼠标拖拽特效

在Web 开发中,为了提供良好的用户体验,经常会对页面中的弹框提供可拖曳的特效,下面利用JavaScript中的鼠标事件完成拖曳特效的实现。具体步囊如下。

(1)编写HTML 页面 

1
2
3
4
5
6
<div id-"box" class-"box">
<div id-"drop"class-"hd">注册信息(可以拖曳)
<span id-"box_close">【关闭】</span>
</div>
<div class="bd"></div>
</div>

上述代码定义了一个可以被拖曳的盒子,盒子的顶部是拖曳条,鼠标在拖曳条上被按住就可以完成整个盒子的移动效果。
(2)鼠标拖曳实现原理
 鼠标拖曳的实现原理是根据鼠标的移动位置来计算盒子的移动位置。首先,要通过 CSS 样式为盒子设置定位,否则即使通过 JavaScript代码修改盒子的位置(left和top值)也无法完成移动。
 然后分析如何根据鼠标的移动位置计算盒子的移动位置。
   盒子的位置(left和top值)=鼠标的位置(left和top值)- 鼠标按下时与盒子之间的距离(left 和 top 值)。由此可见,若要实现鼠标拖曳效果,只要获取鼠标按下时与盒子之间的距离以及鼠标移动后的位置,即可按这个公式计算出盒子移动后的位置。

 

(3)处理鼠标按下事件

编写JavaScript代码,为拖拽条添加mousedown事件及其处理程序,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
//获取被拖动的盒子和拖动条
var box- document.getElementById('box'); var drop s document.getElementById('drop');
drop.onmousedown=function(event){
//鼠标在拖曳条上按下可拖曳盒子
var event " event ll window.event;//获取鼠标按下时的位置
var pagex - event pagex Ll event.clientx + document.documentElemer.scrollLeft;
var pagey - event.pagey ll event.clientY + document.documentElemen.scrollTop;
//计算鼠标按下的位置距盒子的位置
var spacex = pageX - box.offsetLeft;
var spaceY = pageY - box.offsetTop;
};
</script>

  上述第5~13行代码用于为拖曳条添加鼠标按下事件及其处理程序。其中,第8~9行用于记录鼠标按下时距离文档左侧和顶部的位置,第11~12行代码用于计算鼠标按下时与盒子之间的距离。

(4)处理鼠标移动事件

接下来,在上述第12行代码后添加以下代码,实现鼠标的拖曳的特效,具体代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
document.onmousemove=function(event){
var event meventllwindow.event;
// 获取移动后鼠标的位置
var pageX=eventpageX1 event.clientX+documentdocumentElement.scrollLeft
var pageY…event.pageYIevent.clientY+document.documentElement.scrollTop
// 计算并设置盒子移动后的位置
box.style.left = pageX - spaceX + 'px';
box.style.top = pageY - spaceY + 'px';
if(window.getSelection){
window.getSelection().removeAllRanges());
}else{
document.selection.empty();
}
};

  上述第4~5行代码用于获取鼠标拖曳后的位置,第7~8行代码根据第(2)步中分析出的计算公式完成拖曳后盒子位置的计算与设置。第9~13行表示当用户在拖曳条的文字上快速抢动时,避免选中上面的文本。同时,为了使用户体验更好,在鼠标大幅度进行移动时,也能实现指曳效果,以上代码是通过为 document 文档绑定鼠标移动事件来实现的。

(5)处理释放鼠标按键的事件

从以上的效果可以发现,用户松开鼠标按键后,依然可以进行拖曳。因此,下面需要为 document 添加一个释放鼠标按键的事件及其处理程序。在第(3)步第 13 行后添加以下代码,具体代码如下

1
2
3
document.onmouseup=function (){
document.onmousemove = null;
};

  上述代码在释放鼠标按键的事件处理程序中,将document的鼠标移动事件处理程序设置为 null,即可实现鼠标松开时,再次移动鼠标,盒子不发生拖曳特效。按照以上步骤完成所有实理后,即可实现鼠标的拖曳特效。

posted @   一马当先G  阅读(593)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示