JavaScript鼠标拖拽事件小例子详解

最新推荐文章于 2023-10-04 11:08:18 发布

weixin_34129696

最新推荐文章于 2023-10-04 11:08:18 发布

阅读量279

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5b4f3f705188251ace75be23

版权

有时候我们在桌面上新建一个文件夹，大家都知道新建文件夹的位置是系统根据桌面上最后一个默认排序的，想把这个文件夹放在自己容易辨识的地方，可能是右下角，可能是右上角，那这个拖拽是怎么实现的呢？

一、我们先写出来一个盒子：

<div class='box'></div>
复制代码

二、写盒子的样式，鼠标对于盒子来说是相对定位，所以一定要写定位

<style>
    .box{width: 100px;height: 100px;background: green;position: relative;}
</style>
复制代码

这样，就出来一个盒子了。

我们就把这个盒子当做桌面上的一个文件夹了。

三、js

1）先找个这个盒子

<script> 
	var box=document.getElementsByClassName('box')[0];
复制代码

2）我们在进行拖拽的时候，不管盒子移动到哪里；鼠标在盒子的坐标值是不变的第一步

鼠标按下（mousedown），然后需要知道鼠标按下的坐标值

    box.onmousedown=function(event){
    var topY=event.clientY-box.offsetTop;
    var leftX=event.clientX-box.offsetLeft;
复制代码

第二步

鼠标拖拽文件夹移动（mousemove）

    window.onmousemove=function(event){
    var	boxleft=event.clientX-topY;
    var boxtop=event.clientY-leftX;
    box.style.left=boxleft+'px';
    box.style.top=boxtop+'px';
复制代码

第一步与第二步示意图

第三步

文件夹已经拖拽到了我们想要的位置，这个时候鼠标需要做个抬起（mouseup）事件

    window.onmouseup=function(){
    window.onmousemove = null;
复制代码

这个小例子到这就完成了。下面是完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
    .box{width: 100px;height: 100px;background: green;position: relative;}
	</style>
</head>
<body>
	<div class='box'></div>
	<script> 
	var box=document.getElementsByClassName('box')[0];

        box.onmousedown=function(event){
    	var topY=event.clientY-box.offsetTop;
    	var leftX=event.clientX-box.offsetLeft;

    	window.onmousemove=function(event){
    		var boxleft=event.clientX-topY;
    		var boxtop=event.clientY-leftX;
    		box.style.left=boxleft+'px';
    		box.style.top=boxtop+'px';
    	}
    	
    	window.onmouseup=function(){
    		window.onmousemove = null;
    	}
    }
	</script>
</body>
</html>
复制代码

转载于:https://juejin.im/post/5b4f3f705188251ace75be23

weixin_34129696

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript鼠标拖拽事件小例子详解

有时候我们在桌面上新建一个文件夹，大家都知道新建文件夹的位置是系统根据桌面上最后一个默认排序的，想把这个文件夹放在自己容易辨识的地方，可能是右下角，可能是右上角，那这个拖拽是怎么实现的呢？一、我们先写出来一个盒子：<div class='box'></div>复制代码二、写盒子的样式，鼠标对于盒子来说是相对定位，所以一定要写定位<style> ....
复制链接

扫一扫