前些天在某博客看到使用js实现窗口拖拽，果然一脸懵逼的进去，一脸懵逼的出来，今天就学习了拖拽事件（表示我的内心开始是拒绝的）
以下是实现代码（这次是全的）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽事件</title>
<style>
#box{
width:100px;
height:100px;
background:red;
position:absolute;
cursor: move;//个人喜好，当鼠标移动到可拖拽位置时显示为十字形（请在IE6以上尝试）
}
</style>
</head>
<body>
<div id="box" ></div>
<script>
var oBox=document.getElementById("box");
oBox.onmousedown=function(e1){
e1.preventDefault(); //阻止浏览器的默认行为
var dX=e1.clientX-oBox.offsetLeft; //点击位置距元素边缘的位置
var dY=e1.clientY-oBox.offsetTop; //点击位置距元素边缘的位置
window.onmousemove=function(e2){
oBox.style.left=e2.clientX-dX+"px"; //拖拽过程中left值的实际变化量
oBox.style.top=e2.clientY-dY+"px"; //拖拽过程中top值的实际变化量
}
oBox.onmouseup=function(){
window.onmousemove=null;//也可以写成window.onmousemove=""
//清空onmousemove，相对于鼠标移动事件处理函数为空
}//鼠标抬起事件
}
</script>
</body>
</html>
值得一提的是我们传入的参数e1和e2,他们都是对象（这只是代码，这只是代码），而系统给了我们两个相当有用的工具：
e.stopPropagation()阻止事件流（取消冒泡），IE不支持该方法
window.event.cancelBubble = true 这是IE浏览器中阻止事件流的方法
e.preventDefault()阻止浏览器默认行为，IE同样不支持该方法
window.event.returnValue = false;这是IE浏览器中阻止事件流的方法
当然，事情没有那么简单，如果在一个页面中可以拖动的元素有很多该怎么办，总不至于再写一个函数吧。当然不用，不然我也不会写这篇文章。这就需要我们今天的主角面向对象登场（此处略）。
虽然使用面向对象写js有点晕，但是万变不离其宗，也就是我们上面那一堆代码。
这里是面向对象的拖拽事件代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>面向对象的拖拽事件</title>
<style>
*{
margin: 0;padding: 0;
}
</style>
</head>
<body>
<script>
function Fly(imgId){
this.ele=document.getElementById(imgId);
var self=this;
this.ele.onmousedown=function(e){
e.preventDefault();
self.detaX=e.clientX-self.ele.offsetLeft;
self.detaY=e.clientY-self.ele.offsetTop;
self.start();
document.onmouseup=function(){
self.stop();
}
}
this.start=function(){
document.onmousemove=function(e){
var x=e.clientX-self.detaX;
var y=e.clientY-self.detaY;
self.move(x,y)
}
}
this.move=function(x,y){
self.ele.style.left=x+"px";
self.ele.style.top=y+"px";
}
this.stop=function(){
document.onmousemove=null;
}
}
new Fly("gudazi");
new Fly("shengbei")
</script>
</body>
</html>
果然代码块对于我还是太难了，还是一步一步来吧。
首先，我们的构建一个对象吧
function Fly(){}这就是构建的对象（其实就是函数,但函数名首字母一定要大写）
我们还得获得元素吧
function Fly(imgId){ this.ele=document.getElementById(imgId); }这里我们向对象中传入参数，以便我们日后控制多个元素
我们还得保证对对象的可控
function Fly(imgId){
this.ele=document.getElementById(imgId);
var self=this;
}
this只在对象中表示我们操控的元素，但是对象的函数中需要一个新的表示。
接下来就是重点了，这个对象所具有的功能，也就是函数：
思考1：这个被移动的东西需要什么事件触发，onmusedown也就有了
function Fly(imgId){
this.ele=document.getElementById(imgId);
var self=this;
this.ele.onmusedown=function(e){}
}
终于看到一个眼熟的了，不涉及其他函数的东西我们就都可以往里面填了
function Fly(imgId){
this.ele=document.getElementById(imgId);
var self=this;
this.ele.onmusedown=function(e){
e1.preventDefault();
var dX=e1.clientX-oBox.offsetLeft;
var dY=e1.clientY-oBox.offsetTop;
}
}
思考2：这个被移动的物体上总共有哪些事件，
1.触发条件onmusedown；
2.在持续触发状态下的onmousemove；
3.停止触发onmouseup;
其中onmusedown与onmouseup互不干扰（你不可能即按下鼠标左键又抬起鼠标左键）。也就是说，onmouseup事件函数也能往里面塞：
function Fly(imgId){
this.ele=document.getElementById(imgId);
var self=this;
this.ele.onmusedown=function(e){
e1.preventDefault();
var dX=e1.clientX-oBox.offsetLeft;
var dY=e1.clientY-oBox.offsetTop;
this.ele.onmouseup=function(){
window.onmousemove=null;
}
}
}
接下来就剩下移动过程了，由于移动的范围在window中我们不妨设置这么一个函数
this.start=function(){
document.onmousemove=function(e){
var x=e.clientX-self.dX;
var y=e.clientY-self.dY;
}
好像还差一点我们再设置一个函数：
this.move=function(x,y){
self.ele.style.left=x+"px";
self.ele.style.top=y+"px";
}
这下就好办了，我们只要再组织一下
function Fly(imgId){
this.ele=document.getElementById(imgId);
var self=this;
this.ele.onmusedown=function(e){
e1.preventDefault();
var dX=e1.clientX-oBox.offsetLeft;
var dY=e1.clientY-oBox.offsetTop;
self.start();
this.ele.onmouseup=function(){
window.onmousemove=null;
}
}
this.start=function(){
document.onmousemove=function(e){
var x=e.clientX-self.detaX;
var y=e.clientY-self.detaY;
self.move(x,y)
}
}
this.move=function(x,y){
self.ele.style.left=x+"px";
self.ele.style.top=y+"px";
}
}
怎么，好像比我之前的代码少了...
