【JS案例】：实现盒子拖拽功能

JS小案例：实现盒子拖拽功能

HTML部分：

<div id="box"></div>

CSS部分：

#box{width: 100px;height: 100px;background-color: pink;position: absolute;top: 0;left: 0;}

JS部分：

方法一：

window.onload=function(){var bax=document.getElementById("box");var divX=0;var divY=0;var mouseX=0;var mouseY=0;//为box绑定一个鼠标按下事件box.onmousedown=function(e){//获取盒子距离浏览器可视窗口的水平距离和垂直距离divX=this.offsetLeft;divY=this.offsetTop;//获取鼠标距离浏览器可视窗口的水平位置和垂直位置mouseX=e.clientX;mouseY=e.clientY;//为全局绑定一个鼠标移动事件（1.为什么不给box绑定？）document.onmousemove=function(e){//获取移动后的水平偏移量和垂直偏移量var disX=e.clientX-mouseX;var disY=e.clientY-mouseY;//令箱子移动：移动前的位置+移动后的位置box.style.left=disX+divX+"px";box.style.top=disY+divY+"px";}//为盒子绑定一个鼠标移出事件,使箱子停止移动document.onmouseup=function(){document.onmousemove=null;document.onmouseup=null;}}}

逻辑解释：
------1.鼠标按下时：
--------------获取到鼠标按下时的浏览器可视窗口的水平距离和垂直距离；
--------------获取到元素位置的距离浏览器可视窗口的水平距离和垂直距离。
------2.鼠标移动时：
--------------定义变量，表示鼠标移动后的水平偏移量和垂直偏移量；
--------------改变箱子的水平距离和垂直距离=移动前的水平/垂直距离+水平/垂直偏移量；
------3.鼠标放下时：
--------------使元素停止运动

方法二：

window.onload=function(){//开启box1的拖拽var box1=document.getElementById("box1");drag(box1);}//提取1一个专门设置拖拽的函数//参数：开启拖拽的元素function drag(obj){obj.onmousedown=function(event){//2.这行代码的作用？event=event||window.event;//div的偏移量 鼠标.clientX-元素.offsetLeft//div的偏移量 鼠标.clientY-元素.offsetTopvar ol=event.clientX-obj.offsetLeft;var ot=event.clientY-obj.offsetTop;//1.当鼠标在被拖拽元素上按下时，开始拖拽document.onmousemove=function(event){//设置box1捕获所有鼠标按下的事件//setCapture可以将鼠标事件锁定在指定的元素上，当元素捕获了鼠标事件后，该事件只能作用在当前元素上。obj.setCapture && obj.setCapture();//2.当鼠标移动时被拖拽元素跟随鼠标移动event=event||window.event;var left=event.clientX-ol;var top=event.clientY-ot;obj.style.left=left+"px";obj.style.top=top+"px";} //为元素绑定一个鼠标松开函数document.onmouseup=function(){// 3.当鼠标松开时，被拖拽元素固定在当前位置document.onmousemove=null;document.onmouseup=null;//当鼠标松开时取消捕获obj.releaseCapture && obj.releaseCapture();}//3.为什么要添加return false?return false;}}

逻辑解释：
------1.鼠标按下时：
--------------定义变量，保存鼠标按下时的的位置距离元素的水平位置和垂直位置；

------2.鼠标移动时：
--------------使用setcapture方法将该鼠标事件锁定在元素上；
--------------定义变量，表示鼠标移动后的水平偏移量和垂直偏移量-鼠标按下时的水平/垂直位置；
--------------令元素的水平/垂直位置等于上述变量。

------3.鼠标放下时：
--------------使元素停止运动；
--------------使用releasecapture取消捕获。

问题解释

1.此时需要给文档对象绑定一个鼠标移动事件，如果只给box绑定的话，如果鼠标离开box的位置，则无法再拖拽，所以要在document绑定，才能使元素在整个页面移动

2.event这个参数只有IE8以上的浏览器才会兼容，而IE8以下的浏览器则需要使用event=window.event，使代码兼容性更强大了。

当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容。此时会导致拖拽功能的异常，这个是浏览器提供的默认行为。如果不希望发生这个行为，可以通过return false取消这个行为。但是对IE8不起作用。

扩：如何区分clientX、offsetX、screenX？

路漫漫其修远兮，吾将上下而求索。
Array[林]奉上