JavaScript鼠标拖拽事件小例子详解这样，就出来一个盒子了。我们就把这个盒子当做桌面上的一个文件夹了。这个小例

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

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

<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>