JavaScript 简单拖放效果
在拖拽的过程中,这些文字不会被选中.
Drag Me!!
拖放状态： 拖放未开始.
程序说明：
拖放效果，也叫拖拽、拖动，学名Drag-and-drop ，是最常见的js特效之一。在多处地方能见，例如QQ空间摆设时~
这是一个最简单的拖拽，不带Handle，只给于拖拽和限定范围。所以原理很简单，但是重要在细节方面。而往往细节确是最容易忽略的，尤其是在Javascript里，需要对多种浏览器进行测试，这是很多语言都不需要的。
这是一个最简单的拖拽，不带Handle，只给于拖拽和限定范围。所以原理很简单，但是重要在细节方面。而往往细节确是最容易忽略的，尤其是在Javascript里，需要对多种浏览器进行测试，这是很多语言都不需要的。
程序原理：
这里以JesktopDrag为例，来介绍拖拽的原理。
这里利用了对象字面量来完成了整个类，类中的init为主要处理方法。
拖拽的整个事件分析为 onmousedown -> onmousemove
-> onmouseup
现在逐步分析：
1. init:function(o,minX,maxX,minY,maxY){} 这个为运行的方法，其中对象o为obj既你需要的拖放的对象，而剩下的按顺序分别为X坐标最小值和最大值，Y坐标的最小值和最大值。然后从拖放的行为进行分析，拖放首先要点击鼠标，所以向对象o绑定事件，然后连接start方法：o.onmousedown = this.start;。
2. 在start方法中，按照事件分析来说，就需要绑定时间，而为了避免在鼠标移动过快的过程中，脱离了对象o。所以像document绑定事件，
document.onmousemove = JeskTopDrag.move;
document.onmouseup = JeskTopDrag.end;
document.onmousemove = JeskTopDrag.move;
document.onmouseup = JeskTopDrag.end;
在这里有些细节需要留意，由于鼠标点击的地方与对象o的边缘是有一定距离的，所以在开始时，我用o的x属性和y属性进行保存，以便移动的时候保持位，
o.x = e.clientX - JeskTopDrag.o.offsetLeft;
o.y = e.clientY - JeskTopDrag.o.offsetTop;
o.x = e.clientX - JeskTopDrag.o.offsetLeft;
o.y = e.clientY - JeskTopDrag.o.offsetTop;
3. 先来分析move方法，要对象o跟着鼠标运动？其实很简单，只需要把鼠标的位置放入对象o的top和left中就可以了，
o.style.left = e.clientX - o.x +'px';
o.style.top = e.clientY - o.y+ 'px'
o.style.left = e.clientX - o.x +'px';
o.style.top = e.clientY - o.y+ 'px'
4. 最后一步则是当鼠标放开时，也就是触发事件onmouseup，当事件触发时运行end方法，只需要在这里把所有绑定的事件全部移除即可：
JeskTopDrag.o = document.onmousemove = document.onmouseup = null;
JeskTopDrag.o = document.onmousemove = document.onmouseup = null;
程序细节：
下面将会分析下一些细节上的问题，往往也是最让最困惑，和最难解决的。有时候浏览器就不报错，就让你去找，结果还要翻过好几本出才能发现问题。
【关于this指针】
关于this的讲解，很多书上都给于很详细的解释了。所以在这里我就不进一步去分析，毕竟我也只算的上一个新手。
先从程序原理中的onmousedown中的this.start来说，这个时候的this指向谁？或者换个方向来说，谁有start方法？很明显就是类，也就是JeskTopDrag，那就是this=JeskTopDrag了？现在又有一个疑问了，那在逐步分析里，为什么还要用JeskTopDrag.move和JeskTopDrag.end呢？直接用this不就可以啦。现在先看看this的定义，“this指针是面向对象程序设计中的一项重要概念，它表示当前运行的对象。在实现对象的方法时，可以使用this指针来获得该对象自身的引用。”所以从概念可以得知，在onmousedown的start方法中使用this则是指向对象o，而move方法和end方法则是指向document，所以在使用this时一定要观察对象自身是指哪个！
【关于取消默认操作】
什么是默认操作！也就是当你点击鼠标然后移动就可以把你要选择的字框起来，点击连接就发生连接事件，点击键盘上下键可以操作滚动条等等。
以上的都称为默认操作。那为什么要取消默认操作？在刚开始写拖放的时候，没有取消默认操作就发生了一个严重的问题，在FireFox里，第二次拖放时，mousedown事件不能触发，原因很简单，就是默认操作所以影响的。在IE里，拖动时，会自动选取文字。很显然这些都不是我们所希望发生的。一开始我去寻求解决方法，然后发现了如何解决，就是使用取消默认操作的方法，方法如下：
Event.preventDefault();(W3C的取消默认方法)
Event.returnValue=false;(IE中的取消默认方法)
Event.preventDefault();(W3C的取消默认方法)
Event.returnValue=false;(IE中的取消默认方法)
好了，有了这2个我只要把他们放入onmousedown里就可以啦！放了后，发现FireFox的问题解决了。可是IE的问题仍然存在，哦。我把它们在放入onmousemove里，好！所有问题解决。
然后用了一段时间后，在用<a>时发现了一个东西，只要return false;就可以取消<a>的默认操作了，然后我把return false;放入onmousedown和onmousemove中，也可以取消默认操作了。这样一来，只要使用return false;就可以轻松却消默认操作，而且还完全跨平台。
Code
【程序代码】
Code
